Корректный код клавиши Escape в jQuery: решение проблемы

Быстрый ответ

Для обнаружения нажатия клавиши Escape в jQuery используйте код 27. Создайте обработчик для события keydown и сравните значение event.which с 27.

$(document).keydown(function (e) {
  if (e.which == 27) alert("Была нажата клавиша Escape!")
});

С помощью этого кода вы с лёгкостью обнаружите нажатие клавиши Escape.

Основы работы с клавиатурными событиями: KeyDown, KeyUp и другие

Почему стоит отдать предпочтение keyup для обработки действий пользователя

Обычно мы склонны использовать keyup, и вот почему. Люди так устроены, что интинктивно задерживают кнопки перед их отпусканием. Используя keyup, мы определяем момент отпускания клавиши:

$(document).keyup(function(e) {
  if (e.key == "Escape") alert('Клавиша Escape отпущена! Вирус свободы?');
});

Подробнее об этом расскажет наш спикер на видео

Преимущества применения e.key перед другими свойствами

Для простоты кода и ясности рекомендуется использовать e.key. Это особенно актуально при поддержке работы в браузере Internet Explorer:

$(document).keydown(function(e) {
  if (e.key == "Escape") alert('Escape вас не высвободит!');
});

Особенности e.which

e.which — это отголоски прошлого. Лучше всего прибегать к e.key, максимально готовя ваш код к будущим изменениям.

Тонкости работы с непокорной клавишей Enter

Для гармоничного взаимодействия с клавишей Enter используйте следующий код:

$(document).keydown(function(e) {
  if (e.key == "Enter") alert('Нажата клавиша Enter!');
});

Обработчик событий клавиатуры — ваш надёжный инструмент

При помощи обработчика событий клавиатуры вы можете решить любые задачи, словно дирижёр управляет оркестром:

$(document).keydown(function(e) {
  switch (e.key) {
    case "Escape":
      alert('Escape нажат! Слышите ли музыку?');
      break;
    case "Enter":
      $(".save").click(); // Наступает вступление в тайное
      break;
  }
});

Визуализация

Давайте представим процесс иначе:

**Ввод (⌨️):** событие event.key в jQuery
**Результат (🏴‍☠️):** event.key совпадает с "Escape"

Сценарий в действии:

$(document).on('keydown', function (event) {
  if (event.key == "Escape") {
    alert('Была нажата клавиша Escape. Вампиров здесь нет.');
  }
});

Повторяем ввод и результат:

**Нажатие клавиши (🗝️):** ⌨️.
**Нажата клавиша Escape? (🏴‍☠️):** Да ✅ или Нет ❌
**Escape (🗝️):** 💡. Никаких вампиров!

Продвинутый уровень: Усиливаем управление событиями клавиш

Контекстно-зависимая обработка событий

Иногда лучше обрабатывать событие в конкретном контексте. Например, закрыть модальное окно при нажатии Escape:

$("#myModal").keyup(function(e) {
  if (e.key == "Escape") $(this).hide(); // О, сладкая свобода!
});

Улучшение читаемости кода с помощью констант

Добавьте ясность в код с помощью констант. Они превратят ваш код из таинственной загадки в прозрачную и понятную инструкцию:

const KEY_ESCAPE = "Escape";

$(document).keyup(function(e) {
  if (e.key == KEY_ESCAPE) alert('Escape от Escape!');
});

Совместимость со старыми браузерами и поддержка event.which

Для поддержания совместимости со старыми браузерами испольуйте event.which как альтернативу:

$(document).keyup(function(e) {
  var key = e.key || e.which;
  if (key == "Escape" || key == 27) alert('Escape нажат – спасайтесь!');
});

Полезные материалы

1. keypress event | jQuery API Documentation — Ваш надежный источник знаний о событии 'keypress'.
2. javascript – How to detect escape key press? – Stack Overflow — Советы и решения по обработке нажатия клавиши Escape от сообщества Stack Overflow.
3. KeyboardEvent: key property – Web APIs | MDN — Подробная информация о свойстве key объекта KeyboardEvent.
4. keyup event | jQuery API Documentation — Исчерпывающая информация о событии 'keyup'.
5. You Might Not Need jQuery — Откройте для себя новые горизонты за рамками jQuery.
6. JavaScript Key Code Event Tool | Toptal® — Оттачивайте ваши навыки распознавания кодов клавиш.
7. Replace the jQuery Document Ready Function with JavaScript — SitePoint — Как правильно использовать JavaScript вместо функции document.ready от jQuery.