순수 JS 또는 jQuery로 이스케이프 키 누르기를 감지하는 방법은 무엇입니까?

가능한 중복 :
jQuery를 사용하여 이스케이프 키의 키 코드

IE, Firefox 및 Chrome에서 이스케이프 키 누르기를 감지하는 방법은 무엇입니까? 아래 코드는 IE 및 알림에서 작동 27하지만 Firefox에서는 알림0

$('body').keypress(function(e){
    alert(e.which);
    if(e.which == 27){
        // Close my modal window
    }
});

참고 : keyCode되어 사용되지 않는 점점 사용을 key대신.

function keyPress (e) {
    if(e.key === "Escape") {
        // write your logic here.
    }
}

여기 jsfiddle이 있습니다

keyCode 더 이상 사용되지 않습니다

보인다 keydown및 keyup작업, 비록 keypress하지 않을 수 있습니다

$(document).keyup(function(e) {
     if (e.key === "Escape") { // escape key maps to keycode `27`
        // <DO YOUR WORK HERE>
    }
});

jQuery를 사용하여 이스케이프 키의 키 코드

이 keydown이벤트는 Escape에서 잘 작동 keyCode하며 모든 브라우저에서 사용할 수 있다는 이점이 있습니다 . 또한 document본체 가 아닌 리스너를 연결해야합니다 .

2016 년 5 월 업데이트

keyCode은 더 이상 사용되지 않으며 현재 대부분의 최신 브라우저는 현재 key속성을 제공 하지만 현재로서는 Chrome 지원을 위해 대체품이 필요합니다 (현재 Chrome 릴리스를 작성할 때 Safari는 지원하지 않습니다).

evt.key모든 최신 브라우저에서 2018 년 9 월 업데이트 가 지원됩니다.

document.onkeydown = function(evt) {
    evt = evt || window.event;
    var isEscape = false;
    if ("key" in evt) {
        isEscape = (evt.key === "Escape" || evt.key === "Esc");
    } else {
        isEscape = (evt.keyCode === 27);
    }
    if (isEscape) {
        alert("Escape");
    }
};

Click me then press the Escape key

JavaScript 를 사용하면 작동하는 jsfiddle을 확인할 수 있습니다

document.onkeydown = function(evt) {
    evt = evt || window.event;
    if (evt.keyCode == 27) {
        alert('Esc key pressed.');
    }
};

jQuery 를 사용하면 작동하는 jsfiddle을 확인할 수 있습니다

jQuery(document).on('keyup',function(evt) {
    if (evt.keyCode == 27) {
       alert('Esc key pressed.');
    }
});

keyCode&& which& keyup|| 확인keydown

$(document).keydown(function(e){
   var code = e.keyCode || e.which;
   alert(code);
});

가장 좋은 방법은 이것에 대한 기능을 만드는 것입니다

함수:

$.fn.escape = function (callback) {
    return this.each(function () {
        $(document).on("keydown", this, function (e) {
            var keycode = ((typeof e.keyCode !='undefined' && e.keyCode) ? e.keyCode : e.which);
            if (keycode === 27) {
                callback.call(this, e);
            };
        });
    });
};

예:

$("#my-div").escape(function () {
    alert('Escape!');
})

아래는 ESC 키를 비활성화 할뿐만 아니라 누르는 조건을 확인하는 코드이며 상황에 따라 동작을 수행할지 여부를 결정합니다.

이 예에서는

e.preventDefault();

ESC 키 누르기 동작을 비활성화합니다.

다음과 같이 div를 숨기는 것과 같은 작업을 수행 할 수 있습니다.

document.getElementById('myDivId').style.display = 'none';

누른 ESC 키도 고려됩니다.

(e.target.nodeName=='BODY')

이 부분을 모두에게 적용하려면 조건 부분 인 경우이를 제거 할 수 있습니다. 또는 커서가 입력 상자에있을 때에 만이 조치를 적용하기 위해 INPUT을 입력 할 수 있습니다.

window.addEventListener('keydown', function(e){
    if((e.key=='Escape'||e.key=='Esc'||e.keyCode==27) && (e.target.nodeName=='BODY')){
        e.preventDefault();
        return false;
    }
}, true);

가장 간단한 방법은 바닐라 자바 ​​스크립트라고 생각합니다.

document.onkeyup = function(event) {
   if (event.key === 27){
     //do something here
   }
}