Пользователь жмёт Escape, и модалка не закрывается. Нажимает Enter в поле поиска, и ничего. Знакомо? Обработка клавиатуры в JavaScript выглядит просто, пока не начинаешь разбираться в трёх событиях, десятке свойств и зоопарке браузерных отличий.

Каждый keydown или keyup порождает объект KeyboardEvent с двумя десятками полей. Часть из них, deprecated ещё с эпохи IE, часть, ведут себя по-разному в Firefox и Chrome. А документация MDN пестрит примечаниями «не используйте». Разработчику нужна не ещё одна спецификация, нужна шпаргалка, которая работает.

Ниже, полный справочник по клавиатурным событиям: от анатомии KeyboardEvent до готовых сниппетов для горячих клавиш. Таблицу кодов держите в закладках, пригодится в каждом втором проекте.

💡 Быстрый обзор:

• Используйте keydown вместо keypress: он работает для любых клавиш.
• event.key даёт символ клавиши, event.code возвращает её физический код.
• event.keyCode и event.which устарели, в новом коде не применяйте.
• В таблице ниже собраны коды всех стандартных клавиш для современных браузеров.

Что внутри KeyboardEvent

Когда пользователь нажимает любую клавишу, браузер создаёт объект KeyboardEvent, наследник UIEvent, который, в свою очередь, расширяет базовый Event. Внутри, свойства самой клавиши, состояние модификаторов, информация о раскладке.

Спецификация UI Events развивается: появляются новые свойства, старые уходят в deprecated. Главное изменение последних лет, отказ от числовых кодов (keyCode / charCode / which) в пользу event.key и event.code. Все современные браузеры поддерживают эту пару, и строить логику стоит именно на них.

Поддержка браузерами, практически полная: Chrome 51+, Firefox 29+, Safari 10.1+, Edge 79+. Если ваш проект не держится за IE11, можно забыть про event.which.

Три события: keydown, keypress и keyup

Браузер различает три клавиатурных события. Порядок срабатывания фиксирован:

• keydown, клавиша нажата (момент касания);
• keypress, клавиша удерживается и генерирует символ (только для символьных клавиш);
• keyup, клавиша отпущена.

Подписка на keydown через addEventListener:

1
const input = document.getElementById('type-here');
2
 
3
input.addEventListener('keydown', function (event) {
4
  console.log('Нажата:', event.key, '| Код:', event.code);
5
});

Для inline-обработчиков, атрибут элемента:

1
<input type="text" id="type-here" onkeyup="handleKey(event)">

Если вывести объект события в консоль, увидите полную структуру со всеми унаследованными полями от UIEvent и Event:

Почему keydown, основной выбор

keypress официально признан устаревшим. Он срабатывает только для клавиш, производящих символьное значение, и не ловит модификаторы: ни Alt, ни Ctrl, ни Shift, ни Meta. Ctrl+Z или Shift+Tab через keypress не обработать.

Разница между keydown и keyup: keydown срабатывает до обработки клавиши браузером; keyup срабатывает после. Отсюда важное следствие: event.preventDefault() внутри keydown отменяет действие браузера (например, ввод символа в поле), а внутри keyup нет. Для горячих клавиш, валидации ввода и игрового управления нужен именно keydown.

Таблица свойств KeyboardEvent

Три нижние строки, deprecated. Везде, где возможно, переходите на event.key. Если приходится поддерживать старый браузер, делайте fallback:

1
window.addEventListener('keydown', function (event) {
2
  const key = event.key !== undefined ? event.key : event.which;
3
  if (key !== undefined) {
4
    console.log('Клавиша:', key);
5
  }
6
});

Но в 2026 году такой код, только для legacy-проектов. event.key работает везде.

Клавиши-модификаторы и комбинации

Клавиши Control, Shift, Alt и Meta сами по себе действий не производят, но меняют поведение других клавиш. Нажатие Z даёт букву «z», а Ctrl+Z выполняет отмену действия.

Отследить модификатор помогают булевы свойства события:

1
document.getElementById('editor').addEventListener('keydown', function (event) {
2
  if (event.ctrlKey && event.key === 'z') {
3
    event.preventDefault();
4
    undoAction();
5
  }
6
 
7
  if (event.ctrlKey && event.shiftKey && event.key === 'z') {
8
    event.preventDefault();
9
    redoAction();
10
  }
11
});

Тот же подход применим для любых комбинаций: Ctrl+S (сохранить), Ctrl+Shift+N (новое окно), Alt+Tab (переключение). Порядок проверки: сначала модификаторы через булевы флаги, затем event.key для конкретной клавиши. Так читается логика, а не тонет в числовых кодах.

Полная таблица кодов клавиш

Ниже, актуальная таблица для всех стандартных клавиш. Значения event.key и event.code даны так, как их возвращают современные браузеры (Chrome, Firefox, Edge, Safari).

Навигация и действия

Цифровой ряд (основная клавиатура)

Буквы A-Z

event.key возвращает значение в нижнем регистре для букв. event.code не зависит от регистра и раскладки: KeyA означает физическую клавишу A, даже если раскладка русская и вводится «Ф».

Специальные клавиши

Цифровая клавиатура (Numpad)

Функциональные клавиши

Системные и мультимедийные

Знаки пунктуации и символы

Важные замечания к таблице

• event.which, устаревшее свойство, используйте event.key.
• event.code одинаков для строчной (a) и заглавной (A) буквы, это физическая клавиша. event.key возвращает фактический символ с учётом регистра.
• В Firefox значения event.which для клавиш Equal, Semicolon и Minus отличаются от Chrome/Edge/Safari (указаны в примечаниях). Ещё одна причина не использовать event.which.
• Браузеры на основе Chromium и Firefox дают одинаковые event.key и event.code для всех перечисленных клавиш.
• Виртуальные клавиатуры: спецификация UI Events требует, чтобы виртуальная клавиатура (мобильная, экранная), повторяющая раскладку стандартной, возвращала корректные event.code. На практике мобильные браузеры (Chrome Android, Safari iOS) корректно обрабатывают keydown/keyup для основных клавиш, но event.code может быть пустым для нестандартных раскладок.

Интерактивный тренажёр

Для быстрой проверки любого кода из статьи используйте клавиатурный тренажёр: keyevents.netlify.app. Наводите курсор на область, нажимайте клавиши, и смотрите значения event.key, event.code и event.which, а также состояние флагов модификаторов в реальном времени. Исходный код доступен на GitHub.

Видео: клавиатурные события на практике

Короткий практический разбор keydown и keyup, работы модификаторов и горячих клавиш с живыми примерами:

⁉️🤔 Частые вопросы

Чем event.key отличается от event.code?

event.key возвращает символьное значение с учётом раскладки и регистра: для клавиши A это "a" (или "A" с Shift), для русской раскладки, "ф". event.code возвращает физический код клавиши, одинаковый для всех раскладок: "KeyA". Для горячих клавиш надёжнее event.code, он не зависит от языка ввода. Для текстового ввода используйте event.key.

Почему keypress больше не используют?

Спецификация W3C пометила keypress как устаревший: он срабатывает только для символьных клавиш и не ловит модификаторы. Ctrl+C, Shift+Tab и другие комбинации через keypress не обработать. keydown покрывает все клавиши и поддерживается одинаково во всех современных браузерах.

Можно ли полностью отказаться от event.which и event.keyCode?

Да, в 2026 году можно. event.key поддерживается Chrome 51+, Firefox 29+, Safari 10.1+, Edge 79+. Если ваш проект не нацелен на IE11 или Firefox 28, используйте только event.key и event.code.

Как обработать долгое нажатие клавиши?

Сочетайте keydown и keyup. При keydown запускайте таймер или requestAnimationFrame, при keyup, сбрасывайте. Для игрового ввода это стандартный паттерн: клавиша зажата, персонаж движется, отпущена, останавливается.

Клавиатурные события работают на мобильных устройствах?

keydown и keyup работают в мобильных браузерах при использовании внешней Bluetooth-клавиатуры. Экранная клавиатура генерирует события input, а не keydown/keyup для всех клавиш, поэтому для текстовых полей на мобильных лучше использовать событие input.

Как отличить левый Shift от правого?

Через event.code: "ShiftLeft" или "ShiftRight". event.key для обоих возвращает "Shift". Аналогично для Control, Alt и Meta.

Что использовать в вашем проекте

Если пишете новый код, берите keydown как основное событие, а для идентификации клавиш, event.key (символ) и event.code (физическая клавиша). Связка покрывает все сценарии: горячие клавиши, навигацию, игровой ввод, валидацию форм.

Поддерживаете продукт с legacy-кодом на event.which или event.keyCode, запланируйте рефакторинг. Объём работы небольшой: замена в обработчиках, а профит, чистый, предсказуемый код без зоопарка браузерных отличий.

Держите таблицу выше в закладках. Когда в следующий раз понадобится код конкретной клавиши, открывайте и копируйте нужное значение event.code, не вспоминая числовые коды из эпохи IE6.