События JavaScript для клавиш — это хаос. Вот справочник с кодами клавиш, который вы сохраните

В какой-то момент в вашей карьере в JavaScript вы садитесь, чтобы обработать нажатие клавиши. Просто. Вы открываете MDN и находите не одну, не две, а четыре разных свойства, которые вы можете использовать: keyCode, which, keyи codeТри из них устарели. Ни одно из них не полностью согласуется с тем, что такое «ключ». Поздравляем — вы пришли в одну из самых исторически хаотичных областей веба.

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

Четыре свойства — и почему их четыре

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

Свойство	Что возвращает	Статус
event.key	Читаемая строка, например "Enter", "ArrowUp", или "a"	✅ Используйте это
event.code	Идентификатор физической клавиши, например "KeyA", "Digit1", "ArrowLeft"	✅ Используйте это для обнаружения, независимо от размещения интерфейса
event.keyCode	Числовое значение, например 13 для Enter	⚠️ Устарело — избегайте в новых кодах
event.which	То же числовое значение, что и keyCode	⚠️ Устарело — избегайте в новых кодах

keyCode и which являются в сущности одним и тем же, но из разных эпох истории браузеров. Оба возвращают целое число, представляющее клавишу. Оба устарели. Оба продолжают работать во всех браузерах, поэтому вы будете сталкиваться с ними в кодах, созданных до 2015 года.

Почему keyCode Устарело, но всё ещё повсюду

keyCode была первоначальной способностью обнаруживать нажатия клавиш в DOM браузера, датирующейся ранними моделями событий Netscape. Она работала — в основном — но имела серьёзные несоответствия: одинаковая клавиша могла возвращать разные коды в разных браузерах, заглавные буквы не обрабатывались единообразно, а не-ASCII клавиши были хаосом.

W3C официально отменил keyCode и which в спецификации DOM Level 3 Events (2016) в пользу key и code. Но отмена означает «мы рекомендуем вам прекратить использование этого», а не «мы разрушим ваш сайт». Браузеры всё ещё поддерживают это и, вероятно, будут поддерживать его в ближайшем будущем.

Результат: устаревшие коды наполнены проверками event.keyCode === 13 , ответы на Stack Overflow от 2012 года рекомендуют это, и вы найдёте его в производственном коде повсюду. Оно не исчезнет скоро — вы просто не должны писать новый код, использующий это.

event.key vs event.code — Какое из них вам нужно?

Это различие вызывает наибольшее недопонимание у большинства людей. Оба современных и правильных — они просто отвечают на разные вопросы.

• Используйте event.key когда вы хотите знать, какую букву пользователь хотел ввести. На американской клавиатуре нажатие Shift + 2 даёт вам event.key === "@". На немецкой клавиатуре одинаковая физическая клавиша даёт другую букву. event.key отражает фактический логический вывод.
• Используйте event.code когда вы хотите знать, какую физическую клавишу нажали, независимо от раскладки. Это то, что нужно для игрового контроля, горячих клавиш, которые не должны изменяться в зависимости от языка пользователя, или для любого случая, где «клавиша Q» означает верхнюю левую буквенную клавишу — а не букву Q.

Для большинства практических случаев — подача форм, закрытие диалогов, горячие клавиши — event.key это то, что нужно. Для игрового контроля и горячих клавиш, основанных на позиции, используйте event.code.

Правильный способ обработки клавиш в современном JavaScript

Вот как правильно обрабатывать распространённые случаи:

Клавиша Enter (подача форм, подтверждение диалогов)

document.addEventListener('keydown', (e) => {
  if (e.key === 'Enter') {
    // handle Enter
  }
});

Клавиша Escape (закрытие модалок, отмена действий)

document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    closeModal();
  }
});

Клавиши со стрелками (навигация, скроллеры, игровые контроли)

document.addEventListener('keydown', (e) => {
  switch (e.key) {
    case 'ArrowUp':    moveUp();    break;
    case 'ArrowDown':  moveDown();  break;
    case 'ArrowLeft':  moveLeft();  break;
    case 'ArrowRight': moveRight(); break;
  }
});

Клавиши-модификаторы (Ctrl+S, Cmd+K и т.д.)

document.addEventListener('keydown', (e) => {
  if ((e.ctrlKey || e.metaKey) && e.key === 's') {
    e.preventDefault();
    saveDocument();
  }
});

Используйте e.ctrlKey, e.shiftKey, e.altKeyи e.metaKey (Cmd на Mac) для обнаружения комбинаций модификаторов. Эти свойства не устарели и работают как ожидается.

Полная таблица значений клавиш

Таблица ниже охватывает клавиши, которые вы чаще всего используете. Для чего-то, что не указано здесь, используйте инструмент Keycode Info — нажмите любую клавишу и получите точные event.key, event.code, и устаревшие keyCode значения сразу.

Клавиша	event.key	event.code	keyCode (устаревший)
Представляем	"Enter"	"Enter"	13
Экранировать	"Escape"	"Escape"	27
Космос	" " (пробел)	"Space"	32
Вкладка	"Tab"	"Tab"	9
Backspace	"Backspace"	"Backspace"	8
Удалить	"Delete"	"Delete"	46
Arrow Up	"ArrowUp"	"ArrowUp"	38
Arrow Down	"ArrowDown"	"ArrowDown"	40
Arrow Left	"ArrowLeft"	"ArrowLeft"	37
Arrow Right	"ArrowRight"	"ArrowRight"	39
Дом	"Home"	"Home"	36
Конец	"End"	"End"	35
Page Up	"PageUp"	"PageUp"	33
Page Down	"PageDown"	"PageDown"	34
F1	"F1"	"F1"	112
F2	"F2"	"F2"	113
F3	"F3"	"F3"	114
F4	"F4"	"F4"	115
F5	"F5"	"F5"	116
F6	"F6"	"F6"	117
F7	"F7"	"F7"	118
F8	"F8"	"F8"	119
F9	"F9"	"F9"	120
F10	"F10"	"F10"	121
F11	"F11"	"F11"	122
F12	"F12"	"F12"	123
Shift (левый)	"Shift"	"ShiftLeft"	16
Ctrl (левый)	"Control"	"ControlLeft"	17
Alt (левый)	"Alt"	"AltLeft"	18
Cmd / Win	"Meta"	"MetaLeft"	91
Caps Lock	"CapsLock"	"CapsLock"	20
a–z (строчные)	"a"–"z"	"KeyA"–"KeyZ"	65–90
0–9 (верхняя строка)	"0"–"9"	"Digit0"–"Digit9"	48–57
0–9 (нумерационная клавиатура)	"0"–"9"	"Numpad0"–"Numpad9"	96–105

Клавиша, которую вы не можете запомнить — найдите её в режиме онлайн

Никакая справочная таблица не охватывает все клавиши для всех раскладок клавиатуры. Когда вам нужно узнать точные значения для клавиши, которую вы не уверены — например, нумерационная клавиша, клавиша медиа, региональный символ — самый быстрый способ — нажать её и посмотреть.

The Keycode Info делает именно это. Нажмите любую клавишу и сразу увидите event.key, event.code, event.keyCodeи event.which — вместе с состоянием модификаторов. Нет необходимости копировать из MDN, нет необходимости угадывать, что «NumpadEnter» на самом деле называется.

Краткое объяснение

• Используйте event.key для большинства обработки клавиш — это читаемый, современный и локализованный вариант.
• Используйте event.code когда физическое положение клавиши имеет большее значение, чем сам символ (игровые контроли, горячие клавиши, основанные на позиции).
• Прекращайте писать новые коды, использующие event.keyCode или event.which. Они работают, но устарели и менее предсказуемы.
• Когда вы встречаете устаревший код, использующий keyCode === 13, это означает Enter. keyCode === 27 означает Escape. В таблице выше указаны остальные.
• Если вы не можете найти клавишу в любой справочной таблице, нажмите её в Keycode Info и получите ответ мгновенно.

Вам также может понравиться