event.key в JavaScript — символ натиснутої клавіші

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

key – це властивість об'єкта KeyboardEvent в JavaScript, яка повертає значення клавіші, натиснутої користувачем, як текстовий рядок. Це значення відповідає символу або назві клавіші, і воно може бути буквено-цифровим ("a", "1") або відповідати спеціальним клавішам ("Enter", "Escape"). Основною перевагою key є те, що вона безпосередньо вказує, яку клавішу натиснуто, незалежно від фізичної клавіатури користувача, що робить її дуже корисною для обробки текстових даних або гарячих клавіш.

Наприклад, якщо користувач натисне клавішу "a", event.key поверне "a". Якщо натиснута клавіша "Enter", event.key поверне "Enter". Це спрощує обробку подій, де потрібно знати, яку саме клавішу натиснуто, і дозволяє використовувати різні клавіші для створення скорочень або гарячих клавіш у додатках.

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

Цей код прослуховує події натискання клавіш на всій сторінці та виводить символ клавіші в консоль. Наприклад, якщо натиснути клавішу "F", у консолі відобразиться "F". Варто зазначити, що key враховує регістр символів, тому натискання "A" і "a" повернуть різні значення.

key також зручний для визначення дій при натисканні клавіш навігації, таких як "ArrowUp" або "Tab", що дозволяє керувати взаємодією зі сторінкою. Властивість key доступна для подій клавіатури, таких як keydown, keypress, і keyup.

правити

Порада

key є зручним для обробки регістру введених символів. Ви можете відрізняти між великими і маленькими літерами, що зручно для функцій автозаповнення, оскільки натискання "A" і "a" дадуть різні значення.

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

Порада

Для багатомовних додатків, key допомагає уникнути плутанини з локалізацією. Клавіші з символами на різних мовах повертають свої значення відповідно до розкладки клавіатури користувача, що спрощує обробку тексту в різних мовах.

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

Порада

Для визначення комбінацій клавіш, поєднуйте key із event.ctrlKey, event.altKey, або event.shiftKey. Це дозволяє створити гарячі клавіші на кшталт "Ctrl + S" або "Alt + Enter", що часто використовується в багатьох додатках.

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

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

Синтаксис

event.key

Переглядачі

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

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

Переглядач
	51	23	10.1	38	12

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

Переглядач
	51	51	23	10.3

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

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

Приклади

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

<header>
  <h2 class="title">KeyboardEvent key</h2>
  <p class="description">Відслідковує натиснуті клавіші</p>
</header>
<main>
  <div class="result" id="keyResult">
    <!-- Результат натискання клавіші з’явиться тут -->
  </div>
  <input type="text" id="keyInput" placeholder="Натисніть будь-яку клавішу..." />
</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;
  min-height: 50px;
  -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);
}

input#keyInput {
  display: block;
  margin-top: 15px;
  padding: 8px;
  width: 100%;
  box-sizing: border-box;
}

// Отримуємо посилання на поле введення та блок результату
const keyInput = document.getElementById("keyInput");
const keyResult = document.getElementById("keyResult");

// Додаємо обробник події "keydown" для відслідковування натиснутих клавіш
keyInput.addEventListener("keydown", function (event) {
  // Очищаємо попередній результат
  keyResult.innerText = "";

  // Отримуємо назву клавіші
  const key = event.key;

  // Виводимо назву натиснутої клавіші у блоці результату
  keyResult.innerText = `Ви натиснули: ${key}`;

  // Виконуємо дії залежно від натиснутої клавіші
  if (key === "Enter") {
    keyResult.innerText += "\nВи натиснули Enter, виконуємо певну дію!";
  } else if (key === "Escape") {
    keyResult.innerText += "\nВи натиснули Escape, скидаємо значення!";
    keyInput.value = ""; // Очищаємо поле введення
  }
});
//# sourceURL=pen.js

document.addEventListener('keydown', (event) => {
  if (event.key === 'ArrowUp') {
    console.log('Переміщення вгору');
    // Логіка для переміщення об’єкта або елементу вгору
  } else if (event.key === 'ArrowDown') {
    console.log('Переміщення вниз');
    // Логіка для переміщення об’єкта або елементу вниз
  }
});

document.addEventListener('keydown', (event) => {
  if (event.key === 'Enter') {
    console.log('Форма надсилається.');
    // Логіка надсилання форми
  }
});