jQuery '입력'이벤트

input이 jsfiddle을 볼 때까지 jQuery에서 호출 된 이벤트에 대해 들어 본 적이 없습니다. .

왜 작동하는지 아십니까? 별명 keyup입니까?

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

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

키가 아무 것도 수행하지 않아도 실행 keyup되기 때문에 별명 keyup은 아닙니다 (예 : Control 키를 눌렀다 놓으면keyup 이벤트 ).

그것에 대해 생각하는 좋은 방법은 다음과 같습니다. 입력이 변경 될 때마다 트리거되는 이벤트입니다. 여기에는 입력을 수정하는 키를 누르는 것이 포함되지만 이에 국한되지는 않습니다. 예를 들어, Ctrl자체적으로 이벤트를 트리거하지는 않지만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(); });

다시 말하지만 이벤트 위임을 활용하려면 (예 : DOM에 추가 #container하기 전에 이벤트를 설정하려는 경우 input.text) 다음을 염두에 두어야합니다.

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

슬프게도 다시는 현재 작동하지 않습니다!

이 패턴 만 작동합니다.

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

더 많은 현재 정보로 편집

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

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

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

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

하나 "Ininput 이벤트는 Internet Explorer 9에서 버그가 있습니다. 문자가 삽입 된 경우에만 사용자 인터페이스를 통해 텍스트 필드에서 문자가 삭제 될 때 발생하지 않습니다. Internet Explorer 9에서는 onpropertychange 이벤트가 지원되지만 oninput 이벤트, 버그가 있으며 삭제시 실행되지 않습니다.

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

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

INPUT을 사용하는 동안주의하십시오. 이 이벤트는 IE 11에서 포커스와 블러에 발생합니다. 그러나 다른 브라우저에서 변경되면 트리거됩니다.

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

'input'은 DOM 레벨 O 이벤트 모델에서 'oninput'과 동일한 방식으로 작동합니다.

덧붙여서 :

silkfire가 언급했듯이 'jQuery 입력 이벤트'도 검색했습니다. 따라서 나는 여기로 이끌었고 '입력'이 jquery의 bind () 명령에 허용되는 매개 변수라는 것을 알게되었습니다 . 에서는 액션 jQuery에 (p. 102, 2008 에드.) '입력'( '흐림'에서 '언로드'에서, 20 개 등) 가능한 이벤트로 했나요 아니다. p. 도 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와 크롬 모두에서 일하기