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


559

У меня есть две функции. Когда нажата кнопка ввода, функции работают правильно, а когда нажата кнопка выхода - нет. Какой правильный номер для клавиши 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)
});

Нажатие клавиши вернет символ, подключенный к клавише (в правильных заглавных буквах и т. Д.), Keyup вернет количество нажатых аппаратных кнопок. Для ESC вы хотели бы аппаратный код 27 (не символ ascii 27)
Joeri


Есть очень простой трюк, чтобы узнать какой код ключа вы хотите. Просто откройте новую вкладку, вставьте ее document.addEventListener("keydown", e => console.log(e.keyCode))в консоль браузера, щелкните в окне и нажмите нужную клавишу.
anarchist912

Ответы:


926

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

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

39
Это не имеет ничего общего с keyup против нажатия клавиш. Чтобы захватить ESCAPE, вам нужно взглянуть на e.keyCode, а не на e.which (что и происходит в этом примере).
dkamins

211
«Это не имеет никакого отношения к нажатию клавиш против нажатия клавиш» - это неправильно, дакинс. Кажется, что нажатие клавиш не обрабатывается последовательно между браузерами (попробуйте демонстрацию на api.jquery.com/keypress в IE против Chrome против Firefox - иногда это не регистрируется, и оба «which» и «keyCode» различаются) тогда как keyup является последовательным. е. которое является нормализованным значением jquery, так что 'which' или 'keyCode' должны оба работать в keyup.
Джордан Броу

13
@Jordan Brough - Я хотел бы попросить вас оставить свой комментарий в качестве ответа, чтобы люди прочитали его и поняли реальный смысл вашего комментария! так как ваш комментарий так же важен, как и объяснение ответа
Муртаза

15
keydownбудет имитировать собственное поведение - по крайней мере, в Windows, где нажатие ESC или Return в диалоговом окне вызовет действие до отпускания клавиши.
Том

2
@gibberish Я добавил свой комментарий в качестве ответа здесь: stackoverflow.com/a/28502629/58876
Джордан Броу

77

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

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объект, который предоставляет эти типы констант для вас. Этот ТАК вопрос показывает хороший способ определения этого объекта в других браузерах.


15
Что, 27 не просто выскочил на тебя как на клавишу спасения?!? Честно говоря, это действительно должно быть сделано большим количеством людей. Я называю их «магическими числами» и «волшебными струнами». Что значит 72? Почему у вас есть очень специфичная и изменчивая строка, скопированная 300 раз в вашу базу кода? и т. д.
vbullinger

1
Или вы можете просто добавить комментарий над каждым, поскольку вы, вероятно, используете их каждый раз. ИМО так же читабельна
Иван Дерст

8
@IvanDurst Вы можете использовать их только один раз для каждого метода , но я использую их несколько раз в своих проектах. Вы действительно предлагаете, чтобы вы (1) искали значения и (2) комментировали их каждый раз, когда хотите использовать код ключа? Я не знаю о вас, но у меня нет ни желания запоминать их, ни уверенности, что другие программисты будут комментировать их последовательно. Речь идет о том, чтобы сделать кодирование более простым и последовательным, а не просто более читабельным.
Сет Петри-Джонсон

2
Кто-то, кто знает, что они имеют в виду, не должен искать значение, чтобы комментировать их, и набирать комментарий так же быстро, как вводить длинное имя.
NetMage

6
Что случилось с старыми добрыми днями, когда мы привыкли кодировать символьные константы в шестнадцатеричном формате? Все знают, что ESC есть, 0x1Bа Enter есть 0x0D, верно?
Дэвид Р. Триббл

42

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

Вы должны использовать, keyupа не keypress. например:

$(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не регистрируется, а также значения 'which' и ' KeyCode 'меняются), в то время как keyupэто соответствует

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

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

http://api.jquery.com/event.which/ )


5
Я также хотел бы добавить, что браузеры, которые не работают keypressпри побеге, делают это правильно. keypressпредназначен для стрельбы только тогда, когда ключ производит символ, тогда как keyupсрабатывает всегда. developer.mozilla.org/en-US/docs/Web/Events/keypress
ohcibi

26

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

document.onkeydown = function(evt) {
    console.log(evt.keyCode);
}

14

27код для управляющего ключа :)


1
У меня есть две функции, когда ввод - это нажатие, функции работают правильно, но не с клавишей ESC. $ (Документ) .keypress (function (e) {if (e.which == 13) {$ ('. Save'). Click ();} if (e.which == 27) {$ ('. cancel'). click ();}});
Шишант

$ (document) .keypress (function (e) {y = e.keyCode? e.keyCode: e.which;}); Когда я предупреждаю (y), это предупреждает 27 в IE и FF. Вы уверены, что в вашем коде нет ничего плохого?
Соленый

14

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

$(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

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

Другие интересные вещи: JavaScript Keypress Library


10

Попробуйте плагин 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;
}

8

Ваш код работает просто отлично. Скорее всего, это окно не сфокусировано. Я использую подобную функцию, чтобы закрыть окна 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';
    }

});

8

Я пытался сделать то же самое, и это выводило меня из себя. В 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);
}

8

Чтобы объяснить, где нет других ответов; проблема заключается в вашем использовании keypress.

Возможно, событие просто неправильно названо, но keypressопределено, когда оно будет запущено . Т.е. текст. Принимая во внимание, что вы хотите / , который срабатывает всякий раз (до или после, соответственно) . Т.е. эти вещи на клавиатуре.when an actualcharacteris being inserted
keydownkeyupthe user depresses akey

Разница появляется здесь, потому что escэто управляющий символ (буквально «непечатный символ»), и поэтому он не пишет никакого текста, таким образом, даже не стреляя keypress.
enterстранно, потому что даже если вы используете его в качестве управляющего символа (то есть для управления пользовательским интерфейсом), он все равно вставляет символ новой строки, который будет запускаться keypress.

Источник: причудливый режим


1
Слава за чтение спецификации! Это должен быть принятый ответ наверняка :)
DylanYoung

7

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


2
Я хотел сказать ..... Я ненавижу, что этот сайт находится в верхней части результатов поиска, потому что он чертовски уродливый, но он действительно передает необходимую информацию.
mpen

1
Обратите внимание, что в зависимости от события и браузера коды клавиш не всегда соответствуют таблицам ascii.
Алан Х.

2
downvote: не отвечает на вопрос, даже не отвечает на вопрос, hex не имеет ничего общего с вопросом, и OP уже продемонстрировал знание esc == 27.
Джереми

7

Просто опубликовать обновленный ответ, чем e.keyCodeсчитается УСТАРЕЛО на MDN .

Скорее вы должны выбрать e.keyвместо этого, который поддерживает чистые имена для всего. Вот соответствующая копия пасты

window.addEventListener("keydown", function (event) {
  if (event.defaultPrevented) {
    return; // Do nothing if the event was already processed
  }

  switch (event.key) {
    case "ArrowDown":
      // Do something for "down arrow" key press.
      break;
    case "ArrowUp":
      // Do something for "up arrow" key press.
      break;
    case "ArrowLeft":
      // Do something for "left arrow" key press.
      break;
    case "ArrowRight":
      // Do something for "right arrow" key press.
      break;
    case "Enter":
      // Do something for "enter" or "return" key press.
      break;
    case "Escape":
      // Do something for "esc" key press.
      break;
    default:
      return; // Quit when this doesn't handle the key event.
  }

  // Cancel the default action to avoid it being handled twice
  event.preventDefault();
}, true);

3
Но, похоже, поддерживается только в Firefox и Chrome.
Гаян Виракутти


К сожалению, по крайней мере некоторые версии Internet Explorer передают код, Escа не стандарт Escape.
Робин Стюарт

6

Надежная библиотека Javascript для ввода ввода с клавиатуры и введенных комбинаций клавиш. У него нет зависимостей.

http://jaywcjlove.github.io/hotkeys/

hotkeys('enter,esc', function(event,handler){
    switch(handler.key){
        case "enter":$('.save').click();break;
        case "esc":$('.cancel').click();break;
    }
});

горячие клавиши понимают следующие модификаторы: , shiftoptionaltctrlcontrolcommandи .

Следующие специальные клавиши можно использовать для быстрого доступа: backspacetab, clear, enter, return, esc, escape, space, up, down, left, right, home, end, pageup, pagedown, del, deleteи f1через f19.



Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.