jQuery 'input' 이벤트

jQuery 'input' 이벤트

나는jQuery에라는이벤트들없적습다니이어서라는 를 .input내가 이 jsfidle을 보기 전까지.

이게 왜 효과가 있는지 아세요?은 별까니입칭의 입니까?keyup아니면 뭔가?

$(document).on('input', 'input:text', function() {});

사용자 인터페이스를 통해 요소의 텍스트 내용이 변경될 때 발생합니다.

은 아닙니다.keyupkeyup가 아무것도 않는 ▁a▁control(▁trigger▁will다▁even▁the▁will니동합키작됨▁does도트:▁fire가리거).keyup이벤트).

이것에 대해 생각해 볼 수 있는 좋은 방법은 다음과 같습니다. 입력이 바뀔 때마다 트리거되는 이벤트입니다. 것이되지만 이에들어, 는입력수을정는하키것누만를포않지르, 이에국지음되한되함는여이기에▁which▁this▁keys않so).Ctrl, 그자체사촉발않지을것이만지하건는을로,,만▁by▁the것▁event지▁but그이▁will▁itself▁not않▁trigger.Ctrl-V일부 텍스트를 붙여넣으려면), 자동 완성 옵션, Linux 스타일의 중간 클릭 붙여넣기, 끌어서 놓기 등 다양한 작업을 선택합니다.

자세한 내용은 이 페이지와 이 답변에 대한 설명을 참조하십시오.

oninput이벤트는 입력 필드 변경을 추적하는 데 매우 유용합니다.

그러나 IE 버전 < 9에서는 지원되지 않습니다.한 이벤트가 . IE 버전에는 고유한 이벤트가 있습니다.onpropertychange그것은 과 같습니다.oninput.

따라서 다음과 같은 방법으로 사용할 수 있습니다.

$(':input').on('input propertychange');

전체 크로스 브라우저를 지원합니다.

비활성화된 속성이 변경되는 등 모든 속성 변경에 대해 속성 변경을 트리거할 수 있으므로 다음을 포함해야 합니다.

$(':input').on('propertychange input', function (e) {
    var valueChanged = false;

    if (e.type=='propertychange') {
        valueChanged = e.originalEvent.propertyName=='value';
    } else {
        valueChanged = true;
    }
    if (valueChanged) {
        /* Code goes here */
    }
});

jQuery를 사용하면 다음과 같은 효과가 있습니다.

$('a').click(function(){ doSomething(); });
$('a').on('click', function(){ doSomething(); });

과 input그러나 이벤트는 제가 테스트한 브라우저에서 두 번째 패턴만 작동하는 것 같습니다.

따라서 이 기능이 작동할 것으로 예상할 수 있지만(최소한 현재는) 작동하지 않습니다.

$(':text').input(function(){ doSomething(); });

)을 입니다.#container당신의 신당앞 에.input.textDOM에 추가됨), 다음과 같은 사항을 염두에 두어야 합니다.

$('#container').on('input', ':text', function(){ doSomething(); });

슬프게도, 다시 말하지만, 그것은 현재 작동하지 않습니다!

이 패턴만 작동합니다.

$(':text').on('input', function(){ doSomething(); });

최신 정보로 편집

저는 이 패턴을 확실히 확인할 수 있습니다.

$('#container').on('input', ':text', function(){ doSomething(); });

이제 모든 '표준' 브라우저에서도 작동합니다.

INPUT를 사용할 때는 주의하십시오.이 이벤트는 IE 11에서 포커스와 블러에 대해 발생합니다.그러나 다른 브라우저에서 변경될 때 트리거됩니다.

https://connect.microsoft.com/IE/feedback/details/810538/ie-11-fires-input-event-on-focus

Claustrofob이 말했듯이, oninput은 IE9+에서 지원됩니다.

그러나 "Internet Explorer 9에서는 oninput 이벤트가 버그가 있습니다.문자가 삽입된 경우에만 사용자 인터페이스를 통해 텍스트 필드에서 문자가 삭제될 때 실행되지 않습니다.on 속성 변경 이벤트는 Internet Explorer 9에서 지원되지만 oninput 이벤트와 유사하게 버그도 있으며 삭제 시 실행되지 않습니다.

문자는 여러 가지 방법(백스페이스 및 삭제 키, 상황에 맞는 메뉴의 CTRL + X, 잘라내기 및 삭제 명령)으로 삭제할 수 있으므로 모든 변경 사항을 탐지할 수 있는 좋은 솔루션은 없습니다.상황에 맞는 메뉴의 삭제 명령으로 문자가 삭제되면 Internet Explorer 9의 JavaScript에서 수정 내용을 탐지할 수 없습니다."

입력과 키업(백스페이스 키를 누른 상태에서 IE에서 실행하려면 키다운)에 바인딩하는 좋은 결과가 있습니다.

여기서 'input'은 DOM Level O Event Model의 'on input'과 동일한 방식으로 작동한다고 생각합니다.

부수적으로:

silkfire가 코멘트한 것처럼, 나도 'jQuery input event'를 위해 구글을 검색했습니다.그래서 저는 여기로 안내되었고 'input'이 jquery의 bind() 명령에 허용 가능한 매개 변수라는 것을 알고 놀랐습니다.JQuery in Action (p. 102, 2008 ed.)에서 'input'은 가능한 이벤트로 언급되지 않았습니다(다른 20개에 대해서는 'burr'에서 'unload'로).92페이지에서 (즉, 레벨 0 모델과 레벨 2 모델 사이의 다른 문자열 식별자에 대한 참조로부터) 그 반대를 추정할 수 있다는 것은 사실입니다.그것은 상당히 오해의 소지가 있습니다.

jQuery에는 다음과 같은 서명이 있습니다..on()방법:.on( events [, selector ] [, data ], handler )

이벤트는 이 참조에 나열된 이벤트 중 하나일 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/Events

그러나 모든 브라우저에서 지원되는 것은 아닙니다.

Mozilla는 입력 이벤트에 대해 다음과 같이 설명합니다.

또는 요소의 값이 변경되면 DOM 입력 이벤트가 동기적으로 실행됩니다.또한 내용이 변경될 때 내용 편집 가능한 편집기에서 실행됩니다.

$("input#myId").bind('keyup', function (e) {    
    // Do Stuff
});

IE 및 크롬 모두에서 작업

언급URL : https://stackoverflow.com/questions/17384218/jquery-input-event