Как пользоваться: Поиск keyCode JavaScript
- Нажмите на поле (или в любом месте страницы) и нажмите клавишу или сочетание клавиш.
- Посмотрите
event.key,event.codeи устаревшийkeyCode. - Скопируйте сгенерированный обработчик
keydownдля вашего сочетания клавиш.
key, code и keyCode
| Свойство | Что оно показывает | Когда использовать |
|---|---|---|
event.key | Символ или имя клавиши с учётом раскладки и Shift ("a", "A", "Enter") | Ввод текста, подсказка «введите ? для справки» |
event.code | Физическая позиция клавиши, не зависящая от раскладки ("KeyA", "Digit1") | Игры (WASD) и сочетания, привязанные к позиции клавиши |
event.keyCode / which | Устаревшие числовые коды (Enter = 13, Esc = 27) | Только для старого кода — устарело |
event.location | 0 — стандартная, 1 — левая, 2 — правая, 3 — цифровой блок | Различие левого и правого Shift или клавиш цифровой клавиатуры |
Распространённые коды клавиш
| Клавиша | event.key | event.code | keyCode |
|---|---|---|---|
| Enter | Enter | Enter | 13 |
| Escape | Escape | Escape | 27 |
| Пробел | “ ” | Space | 32 |
| Tab | Tab | Tab | 9 |
| Backspace | Backspace | Backspace | 8 |
| Стрелки | ArrowLeft/Up/Right/Down | то же | 37–40 |
| A–Z | a–z / A–Z | KeyA–KeyZ | 65–90 |
| 0–9 | 0–9 | Digit0–Digit9 | 48–57 |
| F1–F12 | F1–F12 | F1–F12 | 112–123 |
Как писать обработчики горячих клавиш
Проверяйте модификаторы явно (e.ctrlKey || e.metaKey покрывает Ctrl в Windows и ⌘ в macOS), вызывайте e.preventDefault() только для тех сочетаний, которые обрабатываете сами, и пропускайте обработчик, когда пользователь вводит текст в поля. Для буквенных сочетаний лучше использовать key, чтобы они учитывали раскладку пользователя, а code — когда важна физическая позиция клавиши.
Проверить регулярные выражения для обработки клавиш можно в тестировщике регулярных выражений, а узнать, как браузер себя идентифицирует, — с помощью парсера user agent.
Также ищут как: таблица keycode, event.key, event.code, просмотр событий клавиатуры, проверка key code, поиск keycode.
Инструменты, которые хорошо сочетаются с Поиск keyCode JavaScript
- HTML-редактор онлайн — Легкая песочница для кода: редактируйте HTML, CSS и JavaScript рядом, сразу видите результат, читайте вывод консоли и скачивайте страницу одним HTML-файлом.
- JavaScript форматтер — Распакуйте и отформатируйте JavaScript, JSON или JSX с нужными отступами и стилем скобок.
- Разрешение экрана — Размеры экрана и окна браузера в CSS-пикселях, коэффициент плотности пикселей и реальное физическое разрешение — измеряется вашим браузером в реальном времени.
- HTML форматер — Вставьте минифицированную или неаккуратную разметку и получите чистый HTML с единообразными отступами, включая встроенные блоки <style> и <script>.
Часто задаваемые вопросы
Нужно ли использовать keyCode?
Нет.
keyCode и which устарели. Используйте event.key для символа и event.code для физической клавиши.Какой keycode у клавиши Enter?
У Enter keyCode 13,
key равен "Enter", а code равен "Enter" (или "NumpadEnter" на цифровой клавиатуре).Почему Ctrl+W закрывает вкладку?
По соображениям безопасности веб-страницы не могут перехватить некоторые сочетания браузера, например Ctrl+W, Ctrl+T и Ctrl+N в большинстве браузеров.
Можно ли установить Поиск keyCode JavaScript как веб-приложение и пользоваться им офлайн?
Да. Поиск keyCode JavaScript — это веб-приложение (PWA), которое можно установить из браузера, без скачивания из магазина приложений. В Chrome или Edge (Windows, macOS, Linux, ChromeOS) или на Android нажмите вверху этой страницы «Установить приложение»; на iPhone и iPad используйте «Поделиться → На экран «Домой»», а в Safari 17+ на Mac — «Файл → Добавить в Dock». После этого приложение откроется в отдельном окне со своим значком, и так как оно полностью работает в браузере, оно продолжит работать офлайн. Firefox на компьютере не умеет устанавливать веб-приложения. Как работает установка.