Keyboard Key Code Viewer

Нажмите любую клавишу, чтобы получить KeyCode события JavaScript

Свойства события

event.key
-
event.location
-
event.code
-
event.which
-
Meta
Ctrl
Alt
Shift

Недавняя история

Нажатия клавиш не записаны

Как узнать JavaScript key code для любой клавиши

Обзор

Создавая клавиатурные взаимодействия в вебе, нужно точно знать, какое значение даёт нажатие — его `key`, `code` и устаревший `keyCode`. Просмотрщик кодов клавиш показывает их вживую: нажмите любую клавишу, и он отобразит идентификаторы, которые увидит ваш JavaScript. Инструмент перехватывает события клавиатуры в браузере, чтобы вы настраивали шорткаты и обработчики без догадок.

Как пользоваться (по шагам)

  1. 1

    Сфокусируйте инструмент и нажмите клавишу

    Кликните в просмотрщик и нажмите любую клавишу или комбинацию для проверки.

  2. 2

    Читайте идентификаторы

    Смотрите `key`, `code`, `keyCode` и какие модификаторы были зажаты.

  3. 3

    Используйте нужное свойство

    Скопируйте значение под ваш обработчик — обычно `key` для символов, `code` для физических позиций клавиш.

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

Инструмент слушает события клавиатуры и при нажатии читает свойства события: `key` (символ или имя, вроде 'a' или 'Enter'), `code` (физическая клавиша, вроде 'KeyA'), числовой `keyCode` (устарел, но встречается) и состояния модификаторов (Shift, Ctrl, Alt, Meta). Он показывает их сразу. Всё работает локально в браузере — нажатия не логируются и не отправляются.

Когда пригодится

Создавать клавиатурный шорткат и нуждаться в точном `key` или `code` для сопоставления. Отлаживать, почему обработчик не срабатывает для некоторой клавиши. Различать клавиши, делящие символ между раскладками. Определять комбинации модификаторов для шортката. Понять разницу между `key`, `code` и `keyCode`. Проверить, что сообщает специальная или медиаклавиша.

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

`key` — это произведённое значение, зависящее от раскладки и модификаторов (Shift+a даёт 'A'). `code` — физическая позиция клавиши, не зависит от раскладки (всегда 'KeyA' для этой клавиши). Используйте `key` для символов, `code` для шорткатов по позиции вроде WASD.

Важные замечания

Некоторые клавиши ведут себя по-разному в браузерах, ОС и раскладках — особенно мёртвые клавиши, ввод через IME и медиаклавиши. Тестируйте на целевых платформах, а не считайте, что значения одной машины применимы везде.

Просмотр кодов клавиш | Super Easy Utils