JS об'єкт Keyboard
Загальний опис
Події клавіатури в JavaScript (keydown, keyup і keypress) дозволяють відстежувати взаємодію користувача з клавіатурою. keydown спрацьовує в момент натискання клавіші, keyup – коли клавіша відпускається, а keypress – під час введення символу (застаріле та використовується рідше). Keyboard Events корисні для багатьох сценаріїв, як-от обробка сполучень клавіш, динамічна перевірка тексту чи створення ігор, що реагують на введення з клавіатури.
Приклад базового використання 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, хоча й доступна, менш надійна, особливо для специфічних клавіш, таких як навігаційні чи функціональні клавіші.
| Порада: | Для запобігання стандартної дії браузера (наприклад, для |
| Порада: | Щоб обробляти подію лише для певної клавіші, додавайте умову всередині обробника, наприклад |
| Порада: | При розробці ігор використовуйте комбінацію |
Синтаксис
element.addEventListener('keydown', function(event) {
// Ваш код
});
element.addEventListener('keyup', function(event) {
// Ваш код
});
element.addEventListener('keypress', function(event) {
// Ваш код
});Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1.5 |
1.2 |
12.1 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
37 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
- |
- |
Приклади
Цей приклад дозволяє користувачеві переміщати квадрат по сторінці за допомогою клавіш зі стрілками, обмежуючи його рух в межах видимого вікна. Натискання Space змінює колір квадрата на випадковий, що надає додатковий візуальний ефект.
Цей приклад обробляє сполучення клавіш Ctrl+Z і Ctrl+Y для виконання команд скасування та повернення дій. Це демонструє, як можна використовувати комбінації клавіш для управління користувацькими функціями, що особливо корисно в текстових редакторах чи інших додатках, де часто використовуються такі команди.
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 = 'Повернення останньої дії!';
}
});У цьому прикладі використовується 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();
}
});Методи
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`).
repeat- Вказує, чи була клавіша натиснута та утримувалась без відпускання (`true` або `false`).
metaKey- Вказує, чи була натиснута клавіша `Meta` (наприклад, `Command` на Mac) під час події.
charCode- Повертає код символу для події `keypress` (застаріле; рекомендується використовувати `key` або `keyCode`).
keyCode- Повертає числовий код клавіші для події клавіатури (застаріле; `key` більш сучасний аналог).
keyIdentifier- Ідентифікує клавішу за унікальним значенням (застаріле; замінено властивістю `key`).