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