Обработка нажатия клавиши Escape в браузерах с JavaScript

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

Чтобы обнаружить нажатие клавиши Escape, следует использовать событие keydown:

document.addEventListener('keydown', event => {
  if (event.key === "Escape") console.log("Нажата Esc – пора на свободу!");
});

Этот подход прост: мы отслеживаем событие нажатия клавиши и при обнаружении Escape выполняем нужное действие.

Расширенный ответ: учтём все нюансы

Быстрый ответ – это лишь отправная точка. Теперь пришло время разбираться, как создать максимально исчерпывающее и надежное решение.

Обеспечение совместимости с разными браузерами

Для поддержки устаревших браузеров рекомендуется использовать event.keyCode наряду с event.key:

document.addEventListener('keydown', event => {
  if (event.key === "Escape" || event.keyCode === 27) {
    console.log("Нажата Esc – следы прошлого все еще с нами!");
  }
});

Несмотря на то что event.keyCode устарел, его использование все еще актуально в старых версиях браузеров.

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

Отслеживание чистого нажатия клавиши Escape

Чтобы отличить чистое нажатие клавиши Escape без модификаторов:

document.addEventListener('keydown', event => {
  if ((event.key === "Escape" || event.keyCode === 27) && !event.shiftKey && !event.ctrlKey && !event.altKey) {
    console.log("Чистое нажатие Esc – для эстетов!");
  }
});

Отслеживание нажатий в различных контекстах

Обычно нажатие клавиши Escape отслеживается на глобальном уровне (на объекте document). Однако, внутри всплывающего окна или другого специфического элемента событие исследуется на локальном уровне:

var modal = document.getElementById('my-modal');
modal.addEventListener('keydown', function(event) {
  if (event.key === "Escape") {
    // Закрываем всплывающее окно!
  }
});

Советы и предостережения для ответственного разработчика

Вот несколько советов, чтобы избежать возможных подводных камней при написании кода.

Используйте keydown

Событие 'keypress' иногда не совсем корректно работает в некоторых браузерах и с модификаторами. Поэтому лучший выбор – это keydown.

Преимущества jQuery

Если вы используете jQuery, отслеживание нажатий клавиш становится удивительно простым и приятным:

$(document).on('keydown', function(event) {
  if (event.key === "Escape") {
    console.log("Esc нажата – так элегантно и легко с jQuery!");
  }
});

Тестирование в разных браузерах

Введите свою функцию в разные браузеры и убедитесь, что она работает правильно. Онлайн-инструменты для тестирования сделают это просто и удобно.

Удобство интерфейса для пользователя

Если клавиша Escape позволяет выходить из диалогов или модальных окон, пользовательский интерфейс должен это ясно демонстрировать.

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

Теперь представьте себе работу детектива, который распознает попытку незамеченно исчезнуть клавиши Escape:

- Пользователь решает уйти (👐)
- Мы проверяем, Escape ли это? (🔍)
- Если да, даем уйти (🔨)
- Мы заметили Escape на выходе! (🚨)

document.addEventListener('keydown', function(event) {
    if (event.key === 'Escape') { 
        // 🚨 Замечено! Escape пытается уйти.
        // Например, мы закрываем модальное окно или прерываем процесс.
    }
});

Упражнение:

Попробуйте "поймать" клавишу Escape, как если бы она была посетителем, который пытается незаметно уйти. Внимательно следите за ней и проверяйте, чтобы удостовериться, что это действительно она.

Детали распознавания нажатий клавиш

Немного погрузимся в детали, открывающие механизмы распознавания нажатий клавиши Escape.

Основы работы с событиями

Каждое нажатие клавиши вызывает событие, а объект event содержит важную информацию для выполнения нашей задачи.

Знакомство с объектом события

Объект event – это надежный помощник, который помогает распознавать активность клавиш пользователя.

События клавиатуры и пользовательский интерфейс

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

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

1. KeyboardEvent: key property – Web APIs | MDN — обработка клавиши Escape в JavaScript.
2. Element: keydown event – Web APIs | MDN — основы обработки событий нажатия клавиш.
3. Element: keyup event – Web APIs | MDN — информация о событиях keyup.
4. EventTarget: addEventListener() method – Web APIs | MDN — настройка обработчиков событий клавиатуры.
5. JavaScript: обработка нажатий клавиш – Stack Overflow — обсуждение методов обработки нажатий на Stack Overflow.
6. JavaScript Key Code Event Tool | Toptal® — инструмент для определения кодов клавиш.
7. События клавиатуры | JavaScript.info — подробно о том, как работают события с клавиатурой.