Как обнаружить нажатие клавиши escape с помощью чистого JS или jQuery?

524

Возможный дубликат:
какой код клавиши для escape-ключа с jQuery

Как обнаружить нажатие клавиши Escape в IE, Firefox и Chrome? Ниже код работает в IE и оповещениях 27, но в Firefox он оповещает0

$('body').keypress(function(e){
    alert(e.which);
    if(e.which == 27){
        // Close my modal window
    }
});
Митхун Шридхаран
источник
1
сделать какое-то обнаружение браузера первым?
Ина
7
Я нахожу quirksmode.org всегда надежным, чтобы выяснить, в каком браузере работает: quirksmode.org/js/keys.html . Там вы можете найти это только keyupили keydownв сочетании с keyCodeработает во всех браузерах.
Феликс Клинг
1
Я думаю, что заголовок этого вопроса должен звучать так: «Как обнаружить нажатие escape-клавиши с помощью jquery?» Или ответы должны быть в родном javascript ...
Wilt
3
$(document).on("keyup", function (e) {var code = e.keyCode || e.which; alert('key pressed: ' + code);});Поздравления с 2014 года
Калле Х. Варавас
Возможные дубликаты кода ключа для escape-ключа с помощью jQuery
Cœur

Ответы:

956

Примечание: 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>
    }
});

Какой код клавиши для escape-ключа с помощью jQuery

Джигар Джоши
источник
11
отменить привязку: $ (document) .unbind ("keyup", keyUpFunc);
Платцы
54
Для $(document).on('keyup.unique_name', ...)$(document).unbind('keyup.unique_name')
отмены привязки
9
Рекомендуется использовать e.which (вместо e.keycode), чтобы проверить, какая клавиша была нажата. jQuery нормализует код ключа и код символа (используется в старых браузерах)
DMTintner
1
@DMTintner: на ту же тему, см. Комментарий, оставленный Джорданом Броем stackoverflow.com/a/1160109/759452
Adrien Be
8
Вы должны всегда использовать ===.
pmandell
211

keydownСобытие будет работать штраф за побег и имеет преимущество позволяет использовать 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

Тим Даун
источник
3
Обратите внимание, вы также можете добавить слушателя к <input>элементу, и поэтому он будет срабатывать только тогда, когда этот элемент имеет фокус.
Майк
1
@Ranmocy: Что это за элемент (с идентификатором 'test')? Только элементы, которые способны получать фокус (входные данные формы, contenteditable элементы, элементы с установленным tabindex), запускают события ключа.
Тим Даун
1
Вы также можете проверить if (evt.key === 'Escape') {вместо использования устаревшихkeyCode
Keysox
1
@tobymackenzie: Так и есть. Разве это не чудесно? Добро пожаловать в дивный новый мир основанной на стандартах веб-разработки.
Тим Даун
1
Если вы хотите узнать, можете ли вы безопасно пользоваться .key, см. Caniuse.com/#feat=keyboardevent-key
Jasper de Vries
37

Используя 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.');
    }
});
Subodh Ghulaxe
источник
17

проверить keyCode&& which& keyup||keydown

$(document).keydown(function(e){
   var code = e.keyCode || e.which;
   alert(code);
});
JANDY
источник
я вижу, что это не работает, jsfiddle.net/GWJVt только для побега ... кажется неловким?
Рейгель
$ (document.body) .keypress () не стреляет
Митхун Шридхаран
@Reigel: действительно, кажется, не работает должным образом с нажатием клавиши. Как бы то ни было, я не могу понять «неловкую» часть.
Джэнди
3
KeyPress поднимается для символьных клавиш (в отличие от KeyDown и KeyUp, которые также поднимаются для нехарактерных клавиш), пока клавиша нажата.
Марта
7

Лучший способ состоит в том, чтобы сделать функцию для этого

НАЗНАЧЕНИЕ:

$.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!');
})
Ивиян Стефан Стипич
источник
4
На самом деле, похоже, что keypressне срабатывает клавиша Escape. По крайней мере, не в Chrome на Mac.
Самсон
1
Спасибо за этот отзыв, я сделал обновление и изменил правило. keydownрешить проблему.
Ивиян Стефан Стипич
Я обновил ваше решение, чтобы иметь возможность поддерживать «только один раз». Вот пример: jsfiddle.net/oxok5x2p .
дк
6

Ниже приведен код, который не только отключает клавишу 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);
Тарик
источник
0

я думаю, что самый простой способ - это ванильный javascript:

document.onkeyup = function(event) {
   if (event.key === 27){
     //do something here
   }
}
Дуан Уокер
источник
6
На моем хроме (версия 55.0.2883.95 (64-битная)) я получаю Escapeкак event.keyа не 27
MosheZada
Это должно быть event.keyCode27 лет.
Йенс Торнелл