Коды клавиш JavaScript - event.key, event.code и keyCode

event.key, event.code и keyCode: в чём разница

Каждое нажатие клавиши в браузере порождает KeyboardEvent с несколькими свойствами. event.key это значение, которое даёт клавиша, например "a", "A", "Enter" или "ArrowUp", и оно зависит от раскладки и состояния Shift. event.code описывает физическую клавишу, например "KeyA" или "Digit1", поэтому одинаков на клавиатурах QWERTY, ЙЦУКЕН, AZERTY или Dvorak. keyCode и which старые числовые коды, устаревшие и непоследовательные в разных браузерах и раскладках. Современный код должен использовать event.key для текста и сочетаний клавиш, а event.code там, где важна позиция, как в управлении WASD в играх.

Возможности

• Показывает event.key, event.code, keyCode и event.location любой клавиши
• Состояние Ctrl, Shift, Alt и Meta, а также автоповтор
• Готовое условие if на JavaScript для нажатой клавиши
• История последних нажатий
• Блокирует прокрутку пробелом и стрелками во время теста

Приватность по умолчанию

События клавиатуры читаются только на этой странице в вашем браузере. Ничего из нажатого не записывается и не отправляется.

Без кейлоггинга, 100% на стороне клиента.

Как пользоваться: Коды клавиш

1
Щёлкните в любом месте страницы, чтобы она получила фокус, и нажмите клавишу. На телефоне коснитесь поля ввода, чтобы открыть экранную клавиатуру.
2
Крупное значение это event.key. Под ним event.code и устаревший keyCode.
3
В карточках видно расположение клавиши (левый или правый Shift, цифровой блок) и зажатые модификаторы; любое значение копируется одним щелчком.
4
Скопируйте сгенерированное условие if в обработчик keydown. История показывает последние клавиши для сравнения сочетаний.

Практические примеры

Сочетания клавиш

Для поиска по Ctrl+K или Cmd+K нажмите сочетание и используйте event.key === "k" вместе с event.ctrlKey || event.metaKey, это работает в Windows и macOS.

Управление в играх

Используйте event.code ("KeyW", "KeyA", "KeyS", "KeyD"), чтобы клавиши движения оставались на месте в ЙЦУКЕН, AZERTY и других раскладках, где event.key был бы другим символом.

Отправка по Enter

Проверяйте event.key === "Enter" и !event.shiftKey в поле чата, чтобы отправлять по Enter и переносить строку по Shift+Enter.

Цифровой блок и клавиши по сторонам

Отличайте Enter цифрового блока (location 3) от основного или левый и правый Shift (location 1 и 2), если это нужно приложению.

Частые вопросы

event.key или event.code?+

event.key для всего, что связано с символом: сочетания с буквами, ввод текста, Escape и Enter. event.code, когда важно физическое положение: игры или горячие клавиши, не зависящие от раскладки.

Почему keyCode устарел?+

Значения keyCode никогда не были стандартизированы: они различаются в браузерах, раскладках и между keydown и keypress. Стандарт KeyboardEvent заменил их на key и code, которые поддерживают все современные браузеры.

Почему мобильная клавиатура даёт "Unidentified" или 229?+

Экранные клавиатуры часто отправляют события композиции вместо настоящих кодов, особенно с автоисправлением или IME. На мобильных для текста слушайте события input или beforeinput.

Почему некоторые сочетания не доходят до страницы?+

Браузер или ОС обрабатывают некоторые сочетания первыми, например Ctrl+W, Ctrl+T, Cmd+Q или Alt+Tab, поэтому страница не может их перехватить или заблокировать.