ПаветтаКоды клавиш JavaScript
В обработчике keydown у клавиши три имени: event.key — что она печатает с учётом раскладки и Shift, event.code — физическая клавиша вроде KeyA или Digit1 независимо от раскладки, и устаревший числовой keyCode, который до сих пор встречается в старом коде.
Три имени одной клавиши
У клавиши в обработчике keydown три разных имени, и путаница между ними — источник трудноуловимых ошибок. Свойство key возвращает то, что клавиша печатает с учётом раскладки и нажатого Shift. Свойство code называет физическую клавишу на клавиатуре независимо от раскладки. Устаревшее keyCode отдаёт число.
Разница видна сразу, если переключить раскладку. Клавиша, на которой в латинской раскладке буква A, в русской печатает Ф: key вернёт разные значения, а code в обоих случаях будет KeyA. Для горячих клавиш нужен именно code, иначе сочетание перестанет работать при переключении языка.
Инструмент показывает все три значения для любой нажатой клавиши плюс состояние модификаторов. Отдельно видно, повторяется ли событие при удержании и какое положение у клавиши, если их на клавиатуре несколько — левый и правый Shift различаются по свойству location.
| Свойство | Что возвращает | Пример для одной клавиши |
|---|---|---|
| key | Печатаемый знак | "a" / "ф" / "A" |
| code | Физическую клавишу | "KeyA" |
| keyCode | Число, устарело | 65 |
| location | Левая или правая | 1 или 2 |
| repeat | Повтор при удержании | true |
От рычагов Ремингтона до стандарта UI Events
Расположение букв на клавиатуре придумал Кристофер Шоулз для пишущей машинки, и в 1878 году раскладка QWERTY закрепилась в машинах Ремингтона. Расхожая версия объясняет порядок борьбой с залипанием рычагов; исследователи спорят, но факт остаётся: раскладка пережила своё техническое обоснование на полтора века.
Русская ЙЦУКЕН складывалась независимо и тоже под механику: частые буквы попали под сильные пальцы. Именно поэтому физическое положение клавиши и печатаемая буква совпадают только внутри одной раскладки.
В браузерах долго жило свойство keyCode с числовыми кодами, которые различались между браузерами и плохо описывали неанглийские раскладки. Стандарт UI Events ввёл key и code как замену, и с середины десятых keyCode официально считается устаревшим, хотя и продолжает работать ради старого кода. Отдельно стандарт описывает и мёртвые клавиши, которые сами по себе ничего не печатают и лишь меняют следующий знак: во французских и чешских раскладках их несколько.
Что брать для горячих клавиш, а что для ввода
Нажмите любую клавишу и посмотрите значения. Для горячих сочетаний берите code: он не зависит от раскладки, и Ctrl+S останется Ctrl+S при вводе по-русски. Для полей ввода и всего, что связано с текстом, берите key — там важно, какой символ человек напечатал.
Проверяйте модификаторы отдельными свойствами, без разбора key: сочетание с Shift меняет печатаемый знак, и сравнение с буквой перестаёт работать. Для системного модификатора на разных платформах смотрите metaKey на Mac и ctrlKey на остальных.
Помните, что браузер оставляет часть сочетаний себе: Ctrl+T, Ctrl+W и подобные перехватить со страницы нельзя. Проверить саму клавиатуру на залипание и пропуски поможет тест клавиатуры.
Учитывайте раскладки за пределами латиницы и кириллицы. В некоторых языках одна физическая клавиша печатает разные знаки в зависимости от предыдущего нажатия, и обработчик, привязанный к печатаемому символу, там ведёт себя непредсказуемо.
Не забывайте про экранные клавиатуры. На телефонах события клавиш приходят не всегда и не все: часть систем сообщает только об изменении значения поля. Логику ввода надо строить так, чтобы она работала и без событий отдельных клавиш.
| Свойств у события | три основных |
| Для горячих клавиш | code |
| Для ввода текста | key |
| keyCode | устарел |
| QWERTY закрепилась | 1878 |
| Левый и правый модификатор | location |
| Системный модификатор на Mac | metaKey |
| Часть сочетаний | забирает браузер |
Как пользоваться
Нажмите любую клавишу на этой странице — тестер покажет все три, плюс which, location и зажатые модификаторы, и запомнит последние нажатия. Ниже таблица кодов для всех клавиш стандартной клавиатуры с поиском по имени и номеру. Проверено 04.09.2026.
- Страница слушает keydown: покажутся key, code, keyCode, which, location и модификаторы. Русская раскладка даёт другой key при том же code.
- Последние десять нажатий остаются в списке, чтобы сравнить сочетания.
- Поиск по имени клавиши, по значению code или по числу keyCode.
- Для сочетаний и игровых кнопок берите event.code, для ввода текста — event.key; keyCode только для поддержки очень старых браузеров.
Частые вопросы
Чем key отличается от code
key — результат нажатия: буква с учётом раскладки и регистра, «Enter», «ArrowUp». code — место на клавиатуре: KeyA остаётся KeyA и в русской раскладке, где печатается «ф». Для горячих клавиш и WASD в играх нужен code, для обработки ввода — key.
Почему keyCode устарел
Он зависит от браузера и системы: у одних клавиш разные номера в Firefox и Chrome, у символов вроде ; и = вообще нет единого стандарта. Спецификация UI Events пометила keyCode, which и charCode устаревшими, но браузеры их не удаляют ради старого кода.
Что такое location
Где физически находится клавиша: 0 — стандартная, 1 — левая (левый Shift, Ctrl, Alt), 2 — правая, 3 — на цифровом блоке. Так различают левый и правый Shift, у которых одинаковый key и keyCode 16.
Как отличить сочетания клавиш
Проверяйте флаги event.ctrlKey, shiftKey, altKey, metaKey вместе с code: например, ctrlKey && code === 'KeyS' для Ctrl+S. На Mac команды идут через metaKey, поэтому обычно проверяют (ctrlKey || metaKey).
Почему на телефоне не все клавиши видны
Экранные клавиатуры часто отдают key «Unidentified» и keyCode 229 для составного ввода. Надёжнее слушать событие input, а keydown использовать только для служебных клавиш вроде Enter и Backspace.
Расчёт идёт в браузере или на сервере?
Нет, нажатия обрабатываются в браузере.
Спросите нейросети об инструменте
Больше возможностей: Нейросеть для кода, написать, найти ошибку, объяснить.
Похожие инструменты
Схема на 104 клавиши: подсветка нажатий, отметка проверенных, поиск залипания и код клавиши.
ОткрытьФорматы бумагиСерии A, B и C в миллиметрах, дюймах и пикселях при любом DPI. Вес листа по плотности, обратный поиск формата и сравнение с Letter и Legal.
ОткрытьMIME-типы по расширениюКакой Content-Type у файла: поиск по расширению и по типу, категории, заголовок для сервера, что отдавать неизвестным файлам.
ОткрытьЧастоты нотТаблица нот C0-B8 с частотами, MIDI-номерами и длиной волны, переключаемый эталон ля, определение ноты по частоте в центах и девять гитарных строёв.
ОткрытьРимские цифрыПеревод числа в римскую запись и обратно, дата римскими цифрами, проверка записи на ошибки и таблицы от 1 до 20, годы и века.
ОткрытьТаблица МенделееваИнтерактивная периодическая система: 118 элементов с атомными массами по данным IUPAC, поиск по названию и символу, группы и категории.
ОткрытьЕщё инструменты для кода и данных
Base64 и URL, форматтер и сравнение JSON, хеши, регулярные выражения, cron, подсети, UUID, QR-код и Unix-время — в разделе 42 инструмента.