keyCode в JavaScript — код натиснутої клавіші

Загальний опис

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.

автор: Bond правити

Порада

Не покладайтеся на keyCode для міжнародних символів, оскільки його значення можуть змінюватися в залежності від розкладки клавіатури. Краще використовувати key, оскільки воно враховує локалізацію.

автор: Bond правити

Порада

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

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

event.keyCode

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

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

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

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

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

Приклади

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

<header>
  <h2 class="title">KeyboardEvent -> keyCode</h2>
  <p class="description">Повертає числовий код натиснутої клавіші.</p>
</header>
<main>
  <div class="result">
    <textarea id="textArea" rows="5" cols="40" placeholder="Введіть текст..."></textarea>
    <p id="feedback"></p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

textarea {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  font-family: monospace;
  resize: none;
}

#feedback {
  margin-top: 15px;
  font-weight: bold;
}

const textArea = document.getElementById('textArea');
const feedback = document.getElementById('feedback');

textArea.addEventListener('keydown', event => {
  switch (event.keyCode) {
    case 37: // Стрілка вліво
      feedback.textContent = 'Переміщення вліво';
      break;
    case 38: // Стрілка вгору
      feedback.textContent = 'Переміщення вгору';
      break;
    case 39: // Стрілка вправо
      feedback.textContent = 'Переміщення вправо';
      break;
    case 40: // Стрілка вниз
      feedback.textContent = 'Переміщення вниз';
      break;
    case 46: // Delete
      textArea.value = '';
      feedback.textContent = 'Текст очищено!';
      break;
    default:
      feedback.textContent = 'Ви натиснули код клавіші: ' + event.keyCode;
      break;}

});
//# sourceURL=pen.js

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

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