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 забезпечують більшу зручність та підтримку сучасних браузерів.

Порада:	`keyCode` може бути корисним для швидкого створення простих демонстрацій, де важливо лише відслідковувати основні клавіші, такі як "Enter" або "Escape". Проте для складніших задач краще використовувати нові властивості, такі як `key`.
Порада:	Не покладайтеся на `keyCode` для міжнародних символів, оскільки його значення можуть змінюватися в залежності від розкладки клавіатури. Краще використовувати `key`, оскільки воно враховує локалізацію.
Порада:	Перевірте браузерну підтримку `keyCode`, якщо ваш проект вимагає широкої сумісності. `keyCode` все ще підтримується багатьма браузерами, але його повна функціональність може змінюватися.

Синтаксис

event.keyCode

Значення

Return

Переглядачі

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

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

Переглядач
	-	-

Приклади

У цьому прикладі, під час натискання клавіш зі стрілками виводяться повідомлення про напрямок переміщення, а натискання клавіші Delete очищує текстове поле. keyCode відстежує коди клавіш і дозволяє визначати різні дії на основі конкретних кодів, що робить його корисним для створення кастомних гарячих клавіш.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/eYqvWjm">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі використовується keyCode для обробки натискання пробілу, яке може бути корисним для управління відтворенням відео. Якщо пробіл натиснутий, виводиться повідомлення, що дозволяє швидко відстежити натискання цієї клавіші для запуску або зупинки відтворення.

document.addEventListener('keydown', (event) => {
  if (event.keyCode === 32) { // 32 - код пробілу
    console.log('Перемикання паузи в відео.');
    // Логіка для зупинки або відтворення відео
  }
});

Цей приклад визначає, чи натиснута клавіша в діапазоні літер A-Z, що корисно для текстових інтерфейсів або ігор. Він дозволяє обробляти дії для алфавітних клавіш і забезпечує виведення символу літери, що дає можливість зчитувати літери незалежно від регістра, оскільки keyCode відображає одну й ту ж цифру для великої та малої літери.

document.addEventListener('keyup', (event) => {
  if (event.keyCode >= 65 && event.keyCode <= 90) {
    console.log('Ви натиснули літеру:', String.fromCharCode(event.keyCode));
  }
});

JS довідник

JavaScript

Наповнення JS розділу