Как да открием натискане на клавиш за изход с чист JS или jQuery?

Забележка: keyCode се отхвърля, използвайте key вместо това.

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

Кодов фрагмент:

var msg = document.getElementById('state-msg');

document.body.addEventListener('keypress', function(e) {
  if (e.key == "Escape") {
    msg.textContent += 'Escape pressed:'
  }
});

Press ESC key <span id="state-msg"></span>

keyCode се отхвърля

Изглежда keydown и keyup работят, въпреки че keypress може и да не работи

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

Кой ключов код за escape ключ с jQuery

Събитието keydown ще работи добре за Escape и има предимството да ви позволява да използвате keyCode във всички браузъри. Освен това трябва да прикачите слушателя към document, а не към тялото.

Актуализация май 2016

keyCode сега е в процес на отхвърляне и повечето модерни браузъри предлагат key собственост сега, въпреки че все още ще имате нужда от резервен вариант за прилична поддръжка на браузъра засега (по време на писане текущите версии на Chrome и Safari не го поддържат).

Актуализация септември 2018 г. evt.key вече се поддържа от всички съвременни браузъри.

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);
});

По-долу е кодът, който не само деактивира клавиша ESC, но също така проверява състоянието, при което е натиснат и в зависимост от ситуацията ще извърши действието или не.

В този пример,

e.preventDefault();

ще деактивира действието при натискане на клавиш ESC.

Можете да направите нещо като скриване на div с това:

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

При натиснат клавиш ESC също се взема предвид:

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

Можете да премахнете тази част от условието if, ако искате да приложите към това за всички. Или можете да насочите 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);

Най-добрият начин е да направите функция за това

ФУНКЦИЯ:

$.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!');
})

Чист JS

можете да прикачите слушател към keyUp събитие за документа.

Освен това, ако искате да сте сигурни, че не е натиснат друг клавиш заедно с клавиша Esc, можете да използвате стойности на ctrlKey, altKey и shifkey.

 document.addEventListener('keydown', (event) => {
        
        if (event.key === 'Escape') {
         //if esc key was not pressed in combination with ctrl or alt or shift
            const isNotCombinedKey = !(event.ctrlKey || event.altKey || event.shiftKey);
            if (isNotCombinedKey) {
                console.log('Escape key was pressed with out any group keys')
              
            }
        }
    });

Във Firefox 78 използвайте това (натискането на клавиш не работи за клавиш Escape):

function keyPress (e)(){
  if (e.key == "Escape"){
     //do something here      
  }
document.addEventListener("keyup", keyPress);

чист JS (без JQuery)

document.addEventListener('keydown', function(e) {
    if(e.keyCode == 27){
      //add your code here
    }
});

мисля, че най-простият начин е ванилия javascript:

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

Актуализирано: Променен ключ =› keyCode