Онлайн Визуализатор Кода Клавиши. Инспектор Кода Ключа

Бесплатный онлайн инструмент для просмотра event.key, event.code, event.which и расположения любой клавиши клавиатуры в реальном времени. Генерирует готовые к использованию сниппеты кода JavaScript.

Нажмите клавишу

Любую клавишу на клавиатуре, чтобы увидеть её код

Студия утилит

Хотите эту утилиту на своём сайте?

Настройте цвета и тёмную тему для WordPress, Notion или вашего сайта.

Часто задаваемые вопросы

В чём разница между event.key и event.code?

event.code представляет физическую позицию клавиши на клавиатуре, независимо от настроенного языка. event.key представляет сгенерированный символ, который может измениться, если вы нажмёте Shift или используете другой язык. Используйте code для управления игрой; используйте key для ввода текста и семантических сочетаний клавиш.

Что такое event.which и почему это устаревшее?

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

Что означает свойство location?

Свойство location указывает, где физически находится клавиша на клавиатуре: Стандартная (обычная позиция), Левая (левая клавиша-модификатор), Правая (правая клавиша-модификатор) или Цифровая клавиатура (цифровая панель). Это полезно для различия между левой и правой клавишами CTRL, например.

Работает ли это с международными клавиатурами и раскладками не-QWERTY?

Да. Инструмент показывает ровно то, что сообщает браузер для вашей конфигурации клавиатуры. event.code всегда возвращает имя QWERTY физической позиции, а event.key показывает фактический символ согласно вашему языку.

# Понимание событий клавиатуры в JavaScript

Когда пользователь нажимает клавишу, браузер срабатывает три события: keydown, keypress и keyup. Каждое раскрывает свойства с информацией о нажатой клавише, но не все эквивалентны или рекомендуются.

# Свойства событий клавиатуры

event.code — Физическая клавиша

Возвращает идентификатор физической позиции клавиши на клавиатуре, используя номенклатуру QWERTY. Например, клавиша "A" на клавиатуре AZERTY возвращает KeyQ. Идеально для управления игрой, где важна позиция, а не символ.

event.key — Сгенерированный символ

Возвращает значение символа, сгенерированное в соответствии с языком и активными модификаторами. Нажатие Shift+A возвращает "A"; без Shift возвращает "a". Для специальных клавиш возвращает названия, такие как "Enter", "Escape", "ArrowUp".

# Когда использовать каждое свойство

Используйте event.code для управления игрой (WASD независимо от языка) и event.key для обнаружения определённых символов или семантических сочетаний клавиш, таких как Ctrl+C.
Свойства event.which и event.keyCode официально устаревшие согласно стандарту W3C. Хотя современные браузеры продолжают их поддерживать для совместимости, их не следует использовать в новом коде.

Библиографические ссылки