KeyboardEvent — події клавіатури keydown і keyup у JS

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

Події клавіатури в JavaScript (keydown, keyup і keypress) дозволяють відстежувати взаємодію користувача з клавіатурою. keydown спрацьовує в момент натискання клавіші, keyup – коли клавіша відпускається, а keypress – під час введення символу (застаріле та використовується рідше). KeyboardEvent корисні для багатьох сценаріїв, як-от обробка сполучень клавіш, динамічна перевірка тексту чи створення ігор, що реагують на введення з клавіатури.

Приклад базового використання keydown для виведення ідентифікатора натиснутої клавіші:

document.addEventListener('keydown', function(event) {
 console.log(`Натиснута клавіша: ${event.key}`);
});

Основні властивості KeyboardEvent включають:

• key: представляє значення клавіші, яку натиснули (наприклад, 'a', 'Enter').
• code: визначає фізичне розташування клавіші на клавіатурі ('KeyA', 'ArrowUp'), що корисно для інтернаціоналізації.
• altKey, ctrlKey, shiftKey, metaKey: булеві значення, що вказують, чи були натиснуті комбінації з клавішами модифікаторами (Alt, Ctrl, Shift, Meta).

Сполучення клавіш можна обробити з використанням умов:

document.addEventListener('keydown', function(event) {
 if (event.ctrlKey && event.key === 's') {
   event.preventDefault();
   console.log('Збереження заблоковано!');
 }
});

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

правити

Порада

Для запобігання стандартної дії браузера (наприклад, для Ctrl+S), використовуйте event.preventDefault(). Це корисно для розробки кастомних гарячих клавіш або блокування системних сполучень.

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

Порада

Щоб обробляти подію лише для певної клавіші, додавайте умову всередині обробника, наприклад if (event.key === 'Enter'). Це зменшить кількість зайвих дій та покращить продуктивність.

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

Порада

При розробці ігор використовуйте комбінацію keydown і keyup для плавного контролю руху. Зокрема, зберігайте стан натиснутої клавіші в змінній і зупиняйте дію при keyup.

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

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

Синтаксис

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

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

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

методи

властивості

Переглядачі

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

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

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

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

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

Приклади

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

<div id="log">Демонстраційний елемент</div>

const logDiv = document.querySelector('#log');

document.addEventListener('keydown', function(event) {
 if (event.ctrlKey && event.key === 'z') {
   logDiv.textContent = 'Скасування останньої дії!';
 } else if (event.ctrlKey && event.key === 'y') {
   logDiv.textContent = 'Повернення останньої дії!';
 }
});

<header>
  <h2 class="title">Keyboard Events</h2>
  <p class="description">Демонструє керування рухом об'єкта на сторінці за допомогою подій клавіатури.</p>
</header>
<main>
  <div class="result">
    <div id="box"></div> <!-- квадрат, яким керуємо через клавіатуру -->
    <p>Використовуйте стрілки для руху, клавішу <strong>Space</strong> для зміни кольору.</p>
  </div>
</main>

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

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  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;
  -webkit-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  -moz-box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
  display: flex;
  flex-direction: column;
  align-items: center;
}

#box {
  width: 50px;
  height: 50px;
  background-color: #3498db;
  position: relative;
  transition: background-color 0.3s;
}

const box = document.getElementById('box');
let position = { top: 0, left: 0 };
const step = 10; // кількість пікселів, на яку рухатиметься квадрат

document.addEventListener('keydown', function (event) {
  switch (event.key) {
    case 'ArrowUp':
      position.top = Math.max(0, position.top - step);
      break;
    case 'ArrowDown':
      position.top = Math.min(window.innerHeight - box.offsetHeight, position.top + step);
      break;
    case 'ArrowLeft':
      position.left = Math.max(0, position.left - step);
      break;
    case 'ArrowRight':
      position.left = Math.min(window.innerWidth - box.offsetWidth, position.left + step);
      break;
    case ' ':
      // змінюємо колір при натисканні Space
      box.style.backgroundColor = getRandomColor();
      break;}


  // оновлюємо позицію квадрата
  box.style.top = position.top + 'px';
  box.style.left = position.left + 'px';
});

// Функція для отримання випадкового кольору
function getRandomColor() {
  return `#${Math.floor(Math.random() * 16777215).toString(16)}`;
}

// Додаємо стилі для позиціонування
box.style.position = 'absolute';
//# sourceURL=pen.js

let isMoving = false;

document.addEventListener('keydown', function(event) {
 if (event.key === 'ArrowRight' && !isMoving) {
   isMoving = true;
   moveCharacter('right');
 }
});

document.addEventListener('keyup', function(event) {
 if (event.key === 'ArrowRight') {
   isMoving = false;
   stopCharacter();
 }
});