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, хоча й доступна, менш надійна, особливо для специфічних клавіш, таких як навігаційні чи функціональні клавіші.

автор: Bond

Порада: Для запобігання стандартної дії браузера (наприклад, для 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) {
 // Ваш код
});

методи

Метод	Опис
initKeyboardEvent	Ініціалізує подію клавіатури вручну, задаючи її властивості (застарілий метод; сучасні API використовують `KeyboardEvent`).
initKeyEvent	Ініціалізує подію `KeyEvent`, задаючи деталі про клавішу (також застарілий метод, що підтримується лише в деяких браузерах).
getModifierState	Перевіряє, чи натиснута певна клавіша-модифікатор (наприклад, `Shift`, `Control`, `Alt`) під час події клавіатури.

властивості

Властивість	Опис
altKey	Вказує, чи була натиснута клавіша `Alt` під час події клавіатури (`true` або `false`).
code	Ідентифікує фізичну клавішу, незалежно від мови введення (наприклад, `'KeyA'` для клавіші `A`).
ctrlKey	Вказує, чи була натиснута клавіша `Control` під час події клавіатури (`true` або `false`).
isComposing	Вказує, чи перебуває користувач у процесі складання символів (наприклад, під час вводу складних знаків).
key	Відображає символ або функцію натиснутої клавіші (наприклад, `'a'`, `'Enter'`).
location	Вказує фізичне розташування клавіші (наприклад, ліва або права клавіша `Shift`).
metaKey	Вказує, чи була натиснута клавіша `Meta` (наприклад, `Command` на Mac) під час події.
repeat	Вказує, чи була клавіша натиснута та утримувалась без відпускання (`true` або `false`).
charCode	Повертає код символу для події `keypress` (застаріле; рекомендується використовувати `key` або `keyCode`).
keyCode	Повертає числовий код клавіші для події клавіатури (застаріле; `key` більш сучасний аналог).
keyIdentifier	Ідентифікує клавішу за унікальним значенням (застаріле; замінено властивістю `key`).

Переглядачі

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

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

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

Приклади

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

Цей приклад обробляє сполучення клавіш Ctrl+Z і Ctrl+Y для виконання команд скасування та повернення дій. Це демонструє, як можна використовувати комбінації клавіш для управління користувацькими функціями, що особливо корисно в текстових редакторах чи інших додатках, де часто використовуються такі команди.

HTML

<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 = 'Повернення останньої дії!';
 }
});

автор: Bond

Цей приклад дозволяє користувачеві переміщати квадрат по сторінці за допомогою клавіш зі стрілками, обмежуючи його рух в межах видимого вікна. Натискання Space змінює колір квадрата на випадковий, що надає додатковий візуальний ефект.

автор: Bond

У цьому прикладі використовується keydown і keyup для управління рухом персонажа. Коли стрілка вправо натиснута, персонаж починає рух, і коли клавішу відпускають, рух припиняється. Використання змінної isMoving запобігає багаторазовому виклику moveCharacter при утриманні клавіші, що робить цей підхід ефективним для ігрових сценаріїв.

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();
 }
});

автор: Bond

Коментарі

Коментарів ще немає — будьте першим!