Нажмите любую клавишу на клавиатуре, чтобы увидеть все её свойства событий, включая key, code, keyCode, which и состояния модификаторов. Необходимый инструмент для разработчиков, работающих с событиями клавиатуры в JavaScript.
Press any key to start...
Key events are captured from the entire window
Просто нажмите любую клавишу на клавиатуре, когда инструмент в фокусе. Дисплей мгновенно показывает все свойства события клавиатуры для нажатой клавиши: event.key (символ или название клавиши вроде 'a', 'Enter', 'ArrowUp'), event.code (идентификатор физической клавиши вроде 'KeyA', 'Enter', 'ArrowUp'), event.keyCode (устаревший числовой код вроде 65 для 'A', 13 для Enter), event.which (устаревший, то же, что keyCode для keydown), event.charCode (для событий keypress) и event.location (0=стандартная, 1=левая, 2=правая, 3=цифровая клавиатура). Состояния клавиш-модификаторов (Ctrl, Shift, Alt, Meta/Windows/Command) показаны визуальными индикаторами. Поддерживается история недавних нажатий клавиш, чтобы вы могли сравнивать разные клавиши. Предоставляется готовый к использованию фрагмент JavaScript-кода для каждой клавиши.
Информация о keycode необходима для JavaScript-разработчиков, реализующих клавиатурные сокращения, горячие клавиши и привязки клавиш в веб-приложениях, игровых разработчиков, настраивающих клавиатурное управление, инженеров доступности, обеспечивающих правильную навигацию с клавиатуры, разработчиков, создающих пользовательские текстовые редакторы или эмуляторы терминалов, нуждающихся в точной обработке клавиш, всех, мигрирующих с устаревших свойств keyCode/which на современный API key/code, разработчиков, отлаживающих проблемы с событиями клавиатуры в разных браузерах и операционных системах, и создающих интерфейсы на основе клавиатуры вроде командных палитр (Cmd+K), модальных диалогов (Escape для закрытия) или навигации в стиле электронных таблиц (клавиши-стрелки, Tab, Enter).
События клавиатуры JavaScript срабатывают в этом порядке: keydown → keypress (устаревший) → keyup. Современный API использует event.key (логическое значение клавиши) и event.code (физическое расположение клавиши). event.key возвращает 'a' или 'A' в зависимости от состояния Shift, в то время как event.code всегда возвращает 'KeyA' независимо от модификаторов или раскладки клавиатуры. Устаревший event.keyCode возвращает числовые значения (65-90 для A-Z, 48-57 для 0-9, 112-123 для F1-F12, 13 для Enter, 27 для Escape, 32 для Space, 37-40 для клавиш-стрелок). event.location различает левые/правые варианты клавиш Shift, Ctrl, Alt и Meta и идентифицирует клавиши цифровой клавиатуры. Свойство code независимо от раскладки: 'KeyA' всегда ссылается на физическую клавишу в позиции 'A' на раскладке QWERTY, даже на клавиатурах AZERTY или Dvorak.
event.key возвращает логическое значение нажатой клавиши: 'a' для строчной a, 'A' с Shift, 'Enter' для клавиши enter. event.code возвращает позицию физической клавиши на клавиатуре. Всегда 'KeyA' для клавиши в позиции A независимо от того, удерживается ли Shift или какая используется раскладка клавиатуры. Используйте 'key' для обработки текстового ввода, 'code' для клавиатурных сокращений.
Да, event.keyCode и event.which устарели в пользу event.key и event.code. Однако keyCode всё ещё широко поддерживается и обычно используется. Современный API key/code рекомендуется для нового кода, потому что он более интуитивен, лучше поддерживает международные клавиатуры и различает левые/правые клавиши-модификаторы.
Слушайте события 'keydown' и проверяйте как свойства key/code, так и модификаторы: if (e.ctrlKey && e.key === 's') { e.preventDefault(); save(); }. Для кроссплатформенных сокращений проверяйте e.metaKey на macOS (Cmd) и e.ctrlKey на Windows/Linux (Ctrl). Используйте event.code для независимых от раскладки сокращений.
Трансформируйте, форматируйте, генерируйте и кодируйте данные мгновенно. Приватно, быстро и всегда бесплатно.
Смотреть все инструменты