Определитель кодов клавиш — keyCode, code, key Properties

Нажмите на зону обнаружения и нажмите любую клавишу, чтобы мгновенно увидеть свойства событий JavaScript: key, code, keyCode, which, charCode и состояние модификаторов (Ctrl, Alt, Shift, Meta). Все 17 значений обновляются в реальном времени. Идеально для отладки обработчиков событий клавиатуры.

Нажмите здесь, затем нажмите любую клавишу

Как это работает

События клавиатуры в JavaScript: key, code и keyCode

Когда пользователь нажимает клавишу, браузер последовательно генерирует три события: keydown, keypress и keyup. Каждый объект события содержит несколько свойств, идентифицирующих нажатую клавишу. Наиболее важные из них: key (символ или именованная клавиша, например 'Enter'), code (физическое расположение клавиши, например 'KeyA' или 'ArrowLeft') и keyCode (устаревшее целое число, например 65 для 'A' вне зависимости от состояния Shift).

Свойства keyCode и which устарели согласно спецификации W3C UI Events, но по-прежнему широко используются в старых кодовых базах. Современные приложения должны предпочитать key для семантического смысла (что производит клавиша) и code для физического положения (какая физическая клавиша была нажата). Например, клавиша 'A' создаёт key='a' или key='A' в зависимости от Shift, но code='KeyA' всегда неизменен.

Свойство location в событиях клавиатуры

Свойство location различает клавиши, которые существуют в нескольких местах на клавиатуре: левый Ctrl и правый Ctrl, левый Shift и правый Shift, цифровые клавиши на цифровой клавиатуре и цифры верхнего ряда. Значения location: 0 (стандартное), 1 (левая сторона), 2 (правая сторона) и 3 (цифровая клавиатура). Особенно полезно для определения, была ли нажата клавиша Enter на цифровой клавиатуре или на главной клавиатуре.

Клавиши-модификаторы (Ctrl, Alt, Shift, Meta) отслеживаются как логические флаги в каждом событии клавиатуры, не только когда эти клавиши нажаты отдельно. Это означает, что вы можете обнаруживать комбинации вроде Ctrl+C, даже если вы в основном слушаете keyCode 67 (C). Клавиша Meta соответствует клавише Windows на клавиатурах Windows и клавише Command на Mac.

Практические сценарии использования свойств событий клавиатуры

Горячие клавиши в веб-приложениях используют комбинацию code (физическая клавиша) и флагов модификаторов для обнаружения комбинаций вроде Ctrl+S (сохранение) или Ctrl+Shift+P (панель команд). Использование code вместо key гарантирует, что сочетание клавиш работает независимо от языковой раскладки: на французской раскладке AZERTY клавиша на позиции 'A' производит другой символ, но code всегда 'KeyA'.

Игровые управляющие элементы обычно используют code для привязки WASD или клавиш со стрелками к движению, поскольку важна физическая позиция, а не производимый символ. Инструменты доступности могут отслеживать Tab (code='Tab') и Enter (code='Enter'), чтобы гарантировать активацию интерактивных элементов без мыши. Этот инструмент позволяет быстро найти точные значения свойств для любой клавиши перед написанием кода обработчика событий.

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

›В чём разница между keyCode и key?

keyCode — устаревшее целочисленное свойство, присваивающее каждой клавише число (например, 65 для 'A', 13 для Enter). key — современная замена, возвращающая произведённый символ ('a' или 'A') или строку именованной клавиши ('Enter', 'ArrowLeft'). Новый код должен использовать key или code вместо keyCode.

›Что такое свойство code?

code идентифицирует нажатую физическую клавишу, независимо от раскладки клавиатуры или состояния модификаторов. 'KeyA' всегда относится к клавише на позиции 'A' клавиатуры QWERTY, даже если пользователь переключился на раскладку AZERTY, где эта клавиша производит 'Q'. Используйте code для горячих клавиш, которые должны работать независимо от языкового стандарта.

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

keyCode был непоследовательным в разных браузерах и операционных системах, давал разные значения для одних и тех же клавиш и плохо обрабатывал символы, не входящие в ASCII. Спецификация W3C UI Events признала его устаревшим в пользу key (для символа/именованной клавиши) и code (для физической позиции). Оба, keyCode и which, теперь помечены как устаревшие в спецификации.

›Что означает значение location?

Location различает клавиши, встречающиеся в нескольких положениях. 0 = стандартное (основная область), 1 = левая клавиша-модификатор (например, левый Shift), 2 = правая клавиша-модификатор (например, правый Ctrl), 3 = цифровая клавиатура. Это позволяет отличить 5 на цифровой клавиатуре (code='Numpad5', location=3) от 5 в верхнем ряду (code='Digit5', location=0).

›Как обнаружить Ctrl+S или другие сочетания клавиш в JavaScript?

Прослушивайте событие keydown и проверяйте как key/code, так и флаги модификаторов: `if (e.ctrlKey && e.key === 's') { e.preventDefault(); saveDocument(); }`. Использование e.key === 's' охватывает как верхний, так и нижний регистр, поскольку состояние модификатора не меняет значение key для буквенных клавиш.

›Что такое свойство charCode?

charCode возвращалось устаревшим событием keypress и давало кодовую точку Unicode введённого символа (например, 65 для 'A'). Теперь оно устарело вместе с самим событием keypress. В событиях keydown/keyup charCode всегда равно 0. Используйте вместо него key или inputType в событии input.

›Как отличить клавишу Enter на цифровой клавиатуре от основной?

Обе клавиши производят key='Enter', но отличаются по code: основная клавиша Enter имеет code='Enter' с location=0, а клавиша Enter цифровой клавиатуры — code='NumpadEnter' с location=3. Проверяйте e.code === 'Enter' для основной клавиши или e.code === 'NumpadEnter' для версии цифровой клавиатуры.

›Что такое клавиша Meta?

Клавиша Meta — это клавиша Windows на клавиатурах Windows (⊞) и клавиша Command на клавиатурах Mac (⌘). В событиях клавиатуры она отслеживается логическим флагом metaKey и производит key='Meta' при нажатии отдельно. Её code — либо 'MetaLeft', либо 'MetaRight'.