Как отслеживать нажатие клавиш в Javascript: методы и подводные камни

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

Для отслеживания нажатий клавиш в JavaScript используйте событие keydown и метод addEventListener:

document.addEventListener('keydown', (e) => console.log(`Нажата клавиша: ${e.key}`));

Этот код будет выводить в консоль название каждой нажатой клавиши. Для получения сведений о клавише, можно обратиться к свойству e.key.

Знакомство с событиями клавиатуры

События клавиатуры в JavaScript подразделяются на три основных типа: keydown, keyup и keypress. Важно разбираться в их различиях и знать, в каких случаях их применять:

• keydown: Срабатывает на момент нажатия клавиши и подходит для всех клавиш, включая модификаторы типа Shift, Alt и пр.
• keyup: Происходит после отпускания клавиши.
• keypress: Считается устаревшим, его использование не рекомендуется, поскольку он не распознает несимвольные клавиши. Лучше обратиться к keydown или keyup.

Выбираем современные практики

Для обеспечения лучшей совместимости с разными браузерами используйте свойства event.key и event.code:

• event.key: Отображает нажатую клавишу в виде символа (например: "a", "A", "1", "Enter").
• event.code: Указывает на физическое расположение клавиши на клавиатуре (например: "KeyA", "Digit1", "Enter"), без учета раскладки и активных модификаторов.

Пример с использованием event.code:

document.addEventListener('keydown', function(event) {
  if (event.code === 'KeyA') {
    console.log('Клавиша A нажата. Уровень пройден!');
  }
});

Эти свойства предпочтительнее для применения в современном коде, нежели устаревший keyCode.

Подход jQuery

Если вы работаете с jQuery, он упрощает привязку событий клавиатуры:

$(document).keydown(function(event) {
  console.log(`Нажатие клавиши с jQuery: ${event.key}`);
});

Несмотря на преимущества jQuery в кроссбраузерной работе, важно также хорошо разбираться в основах JavaScript, поскольку jQuery только расширяет его возможности, а не заменяет.

Учитываем производительность

Производительность кода имеет критическое значение. Обработчики событий клавиатуры должны быть максимально оптимизированы. При добавлении множественных слушателей или выполнении сложных операций внутри них, следует рассмотреть возможность применения техник оптимизации, таких как дебаунсинг, или использования профилировщиков, например, jsbench.me.

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

Представьте клавиатуру как симфонический оркестр, а JavaScript как талантливого дирижера.

document.addEventListener('keydown', function(event) {
    if (event.key === 'c') {
        console.log('Сыграна нота "До"! 🎵');
    }
});

Когда дирижер слышит ноту "До":

[Нажата клавиша 'C']: JavaScript услышал 'До' 🎵.
[Нажата другая клавиша]: JavaScript в ожидании 'До' 🎵.

Получаем результат:

[Нажата клавиша 'C']: Звучит нота 'До'! 🎵
[Нажата другая клавиша]: В ожидании ноты 'До'! ⏳

Эффективная организация кода и лучшие практики

Создание отдельных функций для обработчиков

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

const handleArrowLeft = (event) => {
  if (event.key === 'ArrowLeft') {
    // Осуществляем поворот налево ↩️
  }
};

// Такой вариант лучше читается
document.addEventListener('keydown', handleArrowLeft);

Изучение события beforeinput

Для вмешательства в процесс ввода до того, как текст появится на экране, используйте событие beforeinput:

document.addEventListener('beforeinput', (event) => {
  console.log(`Предварительный ввод: ${event.data}`);
});

Использование ES6

Стрелочные функции и другие возможности ES6 делают код более сжатым и понятным:

document.addEventListener('keydown', (event) => {
  // Экономим пространство и повышаем читаемость 💾
});

Саблюдение согласованности с окружением пользователя

Проверьте, поддерживают ли целевые браузеры используемые вами возможности. Несмотря на широкую поддержку event.key и event.code, всегда полезно проверить совместимость на таких ресурсах как caniuse.com.

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

1. KeyboardEvent – Web APIs | MDN — Детальная информация о KeyboardEvent на MDN.
2. Значение KeyboardEvent (keyCodes, metaKey и другие) | CSS-Tricks — Справка по кодам клавиш для JavaScript.
3. Клавиатура: keydown и keyup — Подробное руководство по событиям клавиатуры в JavaScript.
4. javascript – EventListener для клавиши Enter – Stack Overflow — Полезные советы от сообщества Stack Overflow обработке нажатий клавиш.
5. Инструмент для событий клавиш JavaScript | Toptal® — Интерактивный инструмент для определения кодов клавиш в JavaScript.