jQuery '입력'이벤트

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에서 버그가 있습니다. 문자가 삽입 된 경우에만 사용자 인터페이스를 통해 텍스트 필드에서 문자를 삭제하면 발생하지 않습니다. onpropertychange 이벤트는 Internet Explorer 9에서 지원되지만 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'과 동일한 방식으로 작동합니다.

덧붙여서 :

Just as silkfire commented it, I too googled for 'jQuery input event'. Thus I was led to here and astounded to learn that 'input' is an acceptable parameter to jquery's bind() command. In jQuery in Action (p. 102, 2008 ed.) 'input' is not mentionned as a possible event (against 20 others, from 'blur' to 'unload'). It is true that, on p. 92, the contrary could be surmised from rereading (i.e. from a reference to different string identifiers between Level 0 and Level 2 models). That is quite misleading.

---

jQuery has the following signature for the .on() method: .on( events [, selector ] [, data ], handler )

Events could be anyone of the ones listed on this reference:

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

Though, they are not all supported by every browser.

Mozilla states the following about the input event:

The DOM input event is fired synchronously when the value of an or element is changed. Additionally, it fires on contenteditable editors when its contents are changed.

---

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

working in both IE and chrome

참고URL : https://stackoverflow.com/questions/17384218/jquery-input-event