JS властивість Event.keydown
Загальний опис
Подія keydown спрацьовує в момент натискання будь-якої клавіші на клавіатурі. Вона є однією з основних подій для обробки введення з клавіатури і часто використовується для створення інтерактивних інтерфейсів, де дії користувача можуть бути пов'язані з певними клавішами. Подія keydown спрацьовує до того, як символ з'являється у полі введення, на відміну від події keypress, яка запускається лише для символів, які можуть бути відображені. Важливою особливістю цієї події є можливість обробляти клавіші, що не генерують символи, такі як Ctrl, Shift, Alt, Arrow та інші.
Подія надає об'єкт event, який містить інформацію про натиснуту клавішу. Основні властивості, які можуть бути корисними:
event.key– повертає символ або назву клавіші (наприклад,"a","ArrowUp").event.code– повертає фізичний код клавіші, наприклад,"KeyA".event.ctrlKey,event.shiftKey,event.altKey– булеві значення, які показують, чи натиснуті відповідні клавіші-модифікатори.
Приклад використання події keydown для виведення натиснутої клавіші в консоль:
document.addEventListener('keydown', function(event) {
console.log('Натиснута клавіша: ' + event.key);
});
Також можна використовувати подію keydown, щоб заборонити введення певних символів:
document.addEventListener('keydown', function(event) {
if (event.key === 'Tab') {
event.preventDefault(); // Забороняє дію клавіші Tab
}
});
Використовуючи подію keydown, можна легко створювати гарячі клавіші для керування елементами на сторінці або створювати інтерактивні ігри, де реакція на клавіатуру важлива. Важливо зазначити, що ця подія спрацьовує при кожному повторному натисканні клавіші, якщо її утримувати.
| Порада: | Будьте уважні з фізичними кодами клавіш ( |
| Порада: | Подія |
| Порада: | При обробці цифрових клавіш звертайте увагу на відмінності між основними клавішами та цифровим блоком. Використовуйте |
Синтаксис
element.addEventListener('keydown', function(event) {
// Ваш код тут
});Значення
Return
Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
66 |
57 |
11.1 |
53 |
16 |
| Переглядач | ||||
|---|---|---|---|---|
66 |
66 |
57 |
11.3 |
| Переглядач | ||
|---|---|---|
15.0.0 |
1.0 |
Приклади
У цьому прикладі за допомогою події keydown користувач може керувати рухом зеленого квадрата по екрану, натискаючи клавіші-стрілки. Кожне натискання переміщує квадрат на 10 пікселів у відповідному напрямку (вгору, вниз, ліворуч або праворуч), при цьому рух обмежений межами контейнера.
Цей приклад демонструє, як заборонити стандартну дію браузера для комбінації клавіш Ctrl + S, яка зазвичай викликає діалог збереження сторінки. Ви можете виконати власну дію, наприклад, збереження контенту в локальному сховищі.
document.addEventListener('keydown', function(event) {
if (event.ctrlKey && event.key === 's') {
event.preventDefault();
console.log('Користувач натиснув Ctrl + S, але сторінка не буде збережена.');
}
});У цьому прикладі подія keydown використовується для керування положенням персонажа за допомогою клавіш-стрілок. При натисканні клавіші "ArrowRight" персонаж рухається вправо, а при натисканні "ArrowLeft" — вліво. Це базовий приклад для розуміння, як створювати ігрові механіки з використанням клавіатури.
let positionX = 0;
document.addEventListener('keydown', function(event) {
if (event.key === 'ArrowRight') {
positionX += 10;
} else if (event.key === 'ArrowLeft') {
positionX -= 10;
}
console.log('Позиція персонажа: ' + positionX);
});