keydown в JavaScript — подія натискання будь-якої клавіші

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

Подія 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, можна легко створювати гарячі клавіші для керування елементами на сторінці або створювати інтерактивні ігри, де реакція на клавіатуру важлива. Важливо зазначити, що ця подія спрацьовує при кожному повторному натисканні клавіші, якщо її утримувати.

правити

Порада

При обробці цифрових клавіш звертайте увагу на відмінності між основними клавішами та цифровим блоком. Використовуйте event.code для відрізнення, наприклад, між Digit1 та Numpad1.

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

Порада

Будьте уважні з фізичними кодами клавіш (event.code), оскільки вони залежать від розкладки клавіатури. Наприклад, код клавіші KeyA не змінюється при перемиканні розкладки, тоді як значення event.key зміниться.

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

Порада

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

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

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

Синтаксис

element.addEventListener('keydown', function(event) {
  // Ваш код тут
});

Переглядачі

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

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

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

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

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

Приклади

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

<header>
  <h2 class="title">keydown</h2>
  <p class="description">Спрацьовує, коли натискається клавіша на клавіатурі для керування рухом об'єкта.</p>
</header>
<main>
  <div class="result">
    <div class="movable-box" id="movableBox"></div>
  </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);
  height: 300px;
  position: relative;
}

.movable-box {
  width: 50px;
  height: 50px;
  background-color: #4CAF50;
  position: absolute;
  top: 125px;
  left: 125px;
}

const box = document.getElementById('movableBox');
let positionX = 125;
let positionY = 125;

document.addEventListener('keydown', function (event) {
  const step = 10; // Відстань переміщення на кожне натискання клавіші

  switch (event.key) {
    case 'ArrowUp':
      positionY = Math.max(0, positionY - step); // Не виходимо за межі контейнера
      break;
    case 'ArrowDown':
      positionY = Math.min(250, positionY + step); // Обмежуємо нижню межу
      break;
    case 'ArrowLeft':
      positionX = Math.max(0, positionX - step); // Обмежуємо ліву межу
      break;
    case 'ArrowRight':
      positionX = Math.min(250, positionX + step); // Обмежуємо праву межу
      break;}


  box.style.top = positionY + 'px';
  box.style.left = positionX + 'px';
});
//# sourceURL=pen.js

document.addEventListener('keydown', function(event) {
  if (event.ctrlKey && event.key === 's') {
    event.preventDefault();
    console.log('Користувач натиснув Ctrl + S, але сторінка не буде збережена.');
  }
});

let positionX = 0;

document.addEventListener('keydown', function(event) {
  if (event.key === 'ArrowRight') {
    positionX += 10;
  } else if (event.key === 'ArrowLeft') {
    positionX -= 10;
  }
  console.log('Позиція персонажа: ' + positionX);
});