Какой код клавиши для escape-ключа с помощью jQuery - PullRequest
537 голосов
/ 21 июля 2009

У меня есть две функции. Когда нажата кнопка ввода, функции работают правильно, а когда нажата кнопка выхода - нет. Какой правильный номер для клавиши escape?

$(document).keypress(function(e) { 
    if (e.which == 13) $('.save').click();   // enter (works as expected)
    if (e.which == 27) $('.cancel').click(); // esc   (does not work)
});

Ответы [ 15 ]

894 голосов
/ 21 июля 2009

Попробуйте с событием keyup :

$(document).keyup(function(e) {
  if (e.keyCode === 13) $('.save').click();     // enter
  if (e.keyCode === 27) $('.cancel').click();   // esc
});
73 голосов
/ 02 февраля 2010

Вместо того, чтобы жестко кодировать значения клавиш в вашей функции, рассмотрите возможность использования именованных констант, чтобы лучше передать ваше значение:

var KEYCODE_ENTER = 13;
var KEYCODE_ESC = 27;

$(document).keyup(function(e) {
  if (e.keyCode == KEYCODE_ENTER) $('.save').click();
  if (e.keyCode == KEYCODE_ESC) $('.cancel').click();
});

Некоторые браузеры (например, FireFox, неуверенный в других) определяют глобальный KeyEvent объект, который предоставляет вам эти типы констант. Этот вопрос SO показывает хороший способ определения этого объекта и в других браузерах.

36 голосов
/ 13 февраля 2015

(Ответ извлечен из моего предыдущего комментария )

Вам нужно использовать keyup вместо keypress. e.g.:

$(document).keyup(function(e) {
  if (e.which == 13) $('.save').click();     // enter
  if (e.which == 27) $('.cancel').click();   // esc
});

keypress, похоже, не обрабатывается согласованно между браузерами (попробуйте демонстрацию на http://api.jquery.com/keypress в IE против Chrome против Firefox. Иногда keypress не регистрируется, и значения для обоих ' которые 'и' keyCode 'различаются), тогда как keyup является последовательным.

Поскольку обсуждалось e.which против e.keyCode: обратите внимание, что e.which является нормализованным значением jquery и рекомендуется для использования:

Свойство event.which нормализует event.keyCode и event.charCode. Рекомендуется смотреть событие, которое для ввода с клавиатуры.

(от http://api.jquery.com/event.which/)

25 голосов
/ 13 августа 2012

Чтобы найти код клавиши для любой клавиши, используйте эту простую функцию:

document.onkeydown = function(evt) {
    console.log(evt.keyCode);
}
13 голосов
/ 04 декабря 2013

Ваша лучшая ставка

$(document).keyup(function(e) { 
    if (e.which === 13) $('.save').click();   // enter 
    if (e.which === 27) $('.cancel').click(); // esc   

    /* OPTIONAL: Only if you want other elements to ignore event */
    e.preventDefault();
    e.stopPropagation();
});

Краткое описание

  • which предпочтительнее, чем keyCode, потому что оно нормализовано
  • keyup предпочтительнее, чем keydown, поскольку нажатие клавиши может происходить несколько раз, если пользователь удерживает ее нажатой.
  • Не используйте keypress, если вы не хотите захватывать реальные символы.

Интересно, что Bootstrap использует keydown и keyCode в своем выпадающем компоненте (начиная с 3.0.2)! Я думаю, что это, вероятно, плохой выбор там.

Связанный фрагмент из JQuery doc

Хотя браузеры используют разные свойства для хранения этой информации, jQuery нормализует. который свойство, чтобы вы могли надежно использовать его для получения кода ключа. это код соответствует клавише на клавиатуре, включая коды для специальных ключи, такие как стрелки. Для перехвата фактического ввода текста, .keypress () может быть лучшим выбором.

Другие интересные вещи: Библиотека JavaScript Keypress

13 голосов
/ 21 июля 2009

27 - код для управляющей клавиши. :)

9 голосов
/ 15 июня 2011

Попробуйте подключаемый модуль jEscape ( скачать с Google Drive )

$(document).escape(function() { 
   alert('ESC button pressed'); 
});

или получите код для кросс-браузера

var code = (e.keyCode ? e.keyCode : e.which);
if (code === 27) alert('ESC');
if (code === 13) alert('ENTER');

возможно, вы можете использовать переключатель

var code = (e.keyCode ? e.keyCode : e.which);
switch (code) {
    case 27:
       alert('ESC');
       break;
     case 13:
       alert('ENTER');
       break;
}
7 голосов
/ 04 февраля 2011

Я пытался сделать то же самое, и это выводило меня из себя. В Firefox кажется, что если вы пытаетесь сделать что-то, когда нажата клавиша ESC, он продолжает обрабатывать клавишу ESC, которая затем отменяет все, что вы пытались сделать. Оповещение работает отлично. Но в моем случае я хотел вернуться в историю, которая не сработала. Наконец выяснилось, что я должен был заставить распространение события остановиться, как показано ниже ...

if (keyCode == 27)
{
    history.back();

    if (window.event)
    {
        // IE works fine anyways so this isn't really needed
        e.cancelBubble = true;
        e.returnValue = false;
    }
    else if (e.stopPropagation)
    {
        // In firefox, this is what keeps the escape key from canceling the history.back()
        e.stopPropagation();
        e.preventDefault();
    }

    return (false);
}
7 голосов
/ 28 мая 2010

Ваш код работает просто отлично. Скорее всего, это окно не сфокусировано. Я использую аналогичную функцию для закрытия окон iframe и т. Д.

$(document).ready(function(){

    // Set focus
    setTimeout('window.focus()',1000);

});

$(document).keypress(function(e) {

    // Enable esc
    if (e.keyCode == 27) {
      parent.document.getElementById('iframediv').style.display='none';
      parent.document.getElementById('iframe').src='/views/view.empty.black.html';
    }

});
7 голосов
/ 21 июля 2009

Чтобы получить шестнадцатеричный код для всех символов: http://asciitable.com/

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...