JS об'єкт KeyboardEvent

Загальний опис

Події клавіатури в JavaScript (keydown, keyup і keypress) дозволяють відстежувати взаємодію користувача з клавіатурою. keydown спрацьовує в момент натискання клавіші, keyup – коли клавіша відпускається, а keypress – під час введення символу (застаріле та використовується рідше). KeyboardEvent корисні для багатьох сценаріїв, як-от обробка сполучень клавіш, динамічна перевірка тексту чи створення ігор, що реагують на введення з клавіатури.

Приклад базового використання keydown для виведення ідентифікатора натиснутої клавіші:

document.addEventListener('keydown', function(event) {
 console.log(`Натиснута клавіша: ${event.key}`);
});

Основні властивості KeyboardEvent включають:

• key: представляє значення клавіші, яку натиснули (наприклад, 'a', 'Enter').
• code: визначає фізичне розташування клавіші на клавіатурі ('KeyA', 'ArrowUp'), що корисно для інтернаціоналізації.
• altKey, ctrlKey, shiftKey, metaKey: булеві значення, що вказують, чи були натиснуті комбінації з клавішами модифікаторами (Alt, Ctrl, Shift, Meta).

Сполучення клавіш можна обробити з використанням умов:

document.addEventListener('keydown', function(event) {
 if (event.ctrlKey && event.key === 's') {
   event.preventDefault();
   console.log('Збереження заблоковано!');
 }
});

Подія keydown виконується багаторазово при утриманні клавіші, тоді як keyup спрацьовує один раз, коли клавіша відпускається. Для створення плавних ігрових взаємодій або виконання певних дій, коли клавіша натиснута, keydown буде корисним, а keyup допоможе припинити обробку дії після завершення натискання. Подія keypress, хоча й доступна, менш надійна, особливо для специфічних клавіш, таких як навігаційні чи функціональні клавіші.

правити

Порада

Для запобігання стандартної дії браузера (наприклад, для Ctrl+S), використовуйте event.preventDefault(). Це корисно для розробки кастомних гарячих клавіш або блокування системних сполучень.

автор: Bond правити

Порада

Щоб обробляти подію лише для певної клавіші, додавайте умову всередині обробника, наприклад if (event.key === 'Enter'). Це зменшить кількість зайвих дій та покращить продуктивність.

автор: Bond правити

Порада

При розробці ігор використовуйте комбінацію keydown і keyup для плавного контролю руху. Зокрема, зберігайте стан натиснутої клавіші в змінній і зупиняйте дію при keyup.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

element.addEventListener('keydown', function(event) {
 // Ваш код
});

element.addEventListener('keyup', function(event) {
 // Ваш код
});

element.addEventListener('keypress', function(event) {
 // Ваш код
});

методи

властивості

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1.5	1.2	≤12.1	12	9

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Приклади

+ запропонувати свій приклад у пісочниці

<div id="log">Демонстраційний елемент</div>

const logDiv = document.querySelector('#log');

document.addEventListener('keydown', function(event) {
 if (event.ctrlKey && event.key === 'z') {
   logDiv.textContent = 'Скасування останньої дії!';
 } else if (event.ctrlKey && event.key === 'y') {
   logDiv.textContent = 'Повернення останньої дії!';
 }
});

let isMoving = false;

document.addEventListener('keydown', function(event) {
 if (event.key === 'ArrowRight' && !isMoving) {
   isMoving = true;
   moveCharacter('right');
 }
});

document.addEventListener('keyup', function(event) {
 if (event.key === 'ArrowRight') {
   isMoving = false;
   stopCharacter();
 }
});