Javascript/JQuery : 경고 상자로 두 번 트리거하지 않는 keypress/blur 이벤트를 추가하는 방법은 무엇입니까? IE 만

Question

사용자가 입력하거나 누르기 만하면 유효성을 검사 할 입력 필드가 있습니다.이 경우 이벤트 keypress 및 blur을 사용합니다. 입력이 유효성 검사에 실패하면 경고 상자가 호출됩니다.

나는 IE (모든 버전)에서 잘못된 입력으로 Enter 키를 누르면 어떤 이유로 키 누르기 및 흐림 이벤트가 모두 발생하는 것으로 나타났습니다 (경고 상자 인 것 같지만 FF/Chrome)과 동일한 경고 상자 두 개를 보여줍니다. 나는 그것을 어떻게 가질 수 있습니까?

EDIT : FF/Chrome에서는 enter로 유효성 검사를 시도한 후 아무 곳이나 클릭하면 두 번째 경고 상자가 나타납니다.

간체 코드 :

$("#input-field").keypress(function(event) { 
    if (event.keycode == 13) { 
     event.stopPropagation(); 
     validate(); 
     return false; 
    } 
}); 

$("#input-field").blur(function() { 
    validate(); 
}); 

function validate() { 
    if ($("#input-field").val() == '') { 
     alert("Invalid input"); 
    } 
} 

편집 : 아 - 하. 필자가 잊어 버린 개별적인 세부 사항은 아닙니다. 유효하지 않은 입력을 이전의 유효한 값으로 복원해야하므로 validate 함수가 값을 다시 검사 할 때 두 번 실패하지 않습니다.

Answer 1

Firefox는 keypress 이벤트 권한을 얻지 못합니다. 이러한 이벤트는 문자를 생성하는 키 조합이 눌려 질 때만 트리거됩니다 (키를 누르는 것과 같지 않음).

대신 keydown을 사용하십시오 (이것은 IE가 올바르게 처리하는 유일한 이벤트이기 때문에 MS가 "발명 한"이후) .-)).

http://www.quirksmode.org/dom/events/keys.html을 참조하십시오.

Answer 2

IE UserAgent를 확인하고 Internet Explorer 용 키 누르기 이벤트 (아래의 동일한 기능으로 바인딩 키 누르기 및 흐리기)를 건너 뛰었습니다. 비극적으로 직접적이거나 훌륭한 해결책은 아니지만 같은 문제를 해결하기 위해 노력했습니다. 도움이 될만한 약간의 메모 : jQuery는 어느 것을 정규화하므로 keypress로 e.which == 13을 자신있게 사용할 수 있습니다. 또한 함수를 하나의 바인드로 결합합니다.

$("#input-field").bind('blur keypress', function(e) { 
    if(e.which == 13) { 
     // keypress code (e.g. check for IE and return if so) 
    } 
    validate(); 
}); 

나는 전역을 설정하고 (귀하의 경우) 검증이 이미 요소에 대한 트리거되었는지 여부를 나타 내기 위해 임의의 플래그를 할당) (jQuery의 데이터를 사용하여 시도했지만, 사건은 동시에 또는 적어도 트리거 경우 순차적으로, 신속하게 충분히 개방 된 라인이 트릭을하지는 못했던 플래그를 설정해도 충분히 빠르다. 나는 작은 콜백 지연을 가하는 것이 도움이 될 수 있다고 읽었을 지 모르지만, 그것은 지저분한 것이며 나는 그것을 해결하지 못해서 테스트하지 않았다. stopPropagation() 및 preventDefault()도 도움이되지 않았습니다.