JS властивість Event.key

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

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" дадуть різні значення.
Порада:	Для багатомовних додатків, `key` допомагає уникнути плутанини з локалізацією. Клавіші з символами на різних мовах повертають свої значення відповідно до розкладки клавіатури користувача, що спрощує обробку тексту в різних мовах.
Порада:	Для визначення комбінацій клавіш, поєднуйте `key` із `event.ctrlKey`, `event.altKey`, або `event.shiftKey`. Це дозволяє створити гарячі клавіші на кшталт "Ctrl + S" або "Alt + Enter", що часто використовується в багатьох додатках.

Синтаксис

event.key

Значення

Return

Переглядачі

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

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

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

Приклади

Цей приклад демонструє, як за допомогою властивості key у KeyboardEvent можна реагувати на конкретні клавіші, такі як "Enter" чи "Escape", щоб виконувати певні дії, наприклад очищення поля або виведення додаткового повідомлення.


  See the Pen <a href="https://codepen.io/css_in_ua/pen/abeJWGZ">
  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>.

У цьому прикладі подія keydown реагує на натискання клавіші "Enter". Це може бути корисно для веб-додатків, де Enter викликає дію, таку як надсилання форми або підтвердження введення.

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

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

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

JS довідник

JavaScript

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