JS властивість Event.keyCode
Загальний опис
keyCode – це властивість об'єкта KeyboardEvent у JavaScript, яка повертає числовий код натиснутої клавіші. Це значення є застарілим і часто не рекомендується для використання в нових проєктах, оскільки специфікація JavaScript тепер віддає перевагу властивостям key та code. Однак, keyCode все ще може бути корисним при роботі з деякими старими браузерами або в спадкових системах. Вона повертає ціле число, яке відповідає конкретній клавіші на клавіатурі: наприклад, для клавіші "A" значення буде 65, для клавіші "Enter" – 13.
Робота з keyCode дозволяє визначити, яку саме клавішу натиснув користувач, і відповідно виконати певну дію. keyCode може застосовуватися разом з подіями keydown, keypress і keyup. Проте через відсутність стандартного використання для спеціальних клавіш та локалізації, застосування keyCode може спричинити плутанину в різних браузерах.
document.addEventListener('keydown', (event) => {
if (event.keyCode === 13) { // 13 - код клавіші Enter
console.log('Клавіша Enter натиснута');
}
});
Цей приклад показує, як за допомогою keyCode можна відстежувати натискання клавіші Enter. Якщо код події дорівнює 13, виводиться повідомлення в консоль. Замість числових значень, key і code забезпечують більшу зручність та підтримку сучасних браузерів.
- Порада
-
автор: BondkeyCodeможе бути корисним для швидкого створення простих демонстрацій, де важливо лише відслідковувати основні клавіші, такі як "Enter" або "Escape". Проте для складніших задач краще використовувати нові властивості, такі якkey. - Порада
-
Не покладайтеся на
автор: BondkeyCodeдля міжнародних символів, оскільки його значення можуть змінюватися в залежності від розкладки клавіатури. Краще використовуватиkey, оскільки воно враховує локалізацію. - Порада
-
Перевірте браузерну підтримку
автор: BondkeyCode, якщо ваш проект вимагає широкої сумісності.keyCodeвсе ще підтримується багатьма браузерами, але його повна функціональність може змінюватися.
Синтаксис
event.keyCodeПереглядачі
| Переглядач |  |
 |
 |
 |
 |
 |
|---|---|---|---|---|---|---|
| 1 | 1.5 | 1.2 | 12.1 | 12 | 9 |
| Переглядач |  |
 |
 |
 |
|---|---|---|---|---|
| 4.4 | 18 | 4 | 1 |
Приклади
+ запропонувати свій приклад у пісочниці
У цьому прикладі використовується keyCode для обробки натискання пробілу, яке може бути корисним для управління відтворенням відео. Якщо пробіл натиснутий, виводиться повідомлення, що дозволяє швидко відстежити натискання цієї клавіші для запуску або зупинки відтворення.
document.addEventListener('keydown', (event) => {
if (event.keyCode === 32) { // 32 - код пробілу
console.log('Перемикання паузи в відео.');
// Логіка для зупинки або відтворення відео
}
});У цьому прикладі, під час натискання клавіш зі стрілками виводяться повідомлення про напрямок переміщення, а натискання клавіші Delete очищує текстове поле. keyCode відстежує коди клавіш і дозволяє визначати різні дії на основі конкретних кодів, що робить його корисним для створення кастомних гарячих клавіш.
Цей приклад визначає, чи натиснута клавіша в діапазоні літер A-Z, що корисно для текстових інтерфейсів або ігор. Він дозволяє обробляти дії для алфавітних клавіш і забезпечує виведення символу літери, що дає можливість зчитувати літери незалежно від регістра, оскільки keyCode відображає одну й ту ж цифру для великої та малої літери.
document.addEventListener('keyup', (event) => {
if (event.keyCode >= 65 && event.keyCode <= 90) {
console.log('Ви натиснули літеру:', String.fromCharCode(event.keyCode));
}
});Коментарі
Коментарів ще немає — будьте першим!