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" дадуть різні значення.

автор: 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

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

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

Приклади

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

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('Форма надсилається.');
    // Логіка надсилання форми
  }
});