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

Кожен keydown або keyup породжує об’єкт KeyboardEvent із двома десятками полів. Частина з них застаріла ще з епохи 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.