JS властивість Event.which (Key)

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

which — це властивість об'єкта KeyEvent, яка повертає числовий код клавіші, натиснутої користувачем під час події клавіатури, такої як keydown, keypress або keyup. Вона використовувалася раніше для визначення коду клавіші, яка була натиснута. Кожна клавіша на клавіатурі має свій код, який представляє цю клавішу, наприклад: 13 для клавіші Enter, 27 для Escape, 32 для пробілу і т. д.

Зараз властивість which вважається застарілою, і рекомендується використовувати більш сучасні властивості, такі як event.key або event.code, які надають більш детальну інформацію. Однак which все ще використовується для забезпечення сумісності з деякими старими браузерами. Для більш сучасного підходу event.key повертає символ натиснутої клавіші (наприклад, "Enter" або "a"), тоді як event.code повертає фізичний код клавіші незалежно від мови розкладки.

При використанні властивості which, варто пам'ятати, що її поведінка може відрізнятися для подій keypress, де вона повертає значення символу (ASCII-код), і для keydown та keyup, де вона повертає код фізичної клавіші. Наприклад:

document.addEventListener('keydown', function(event) {
  if (event.which === 13) {
    console.log('Натиснута клавіша Enter.');
  }
});

У цьому прикладі, коли користувач натискає клавішу Enter, значення which дорівнюватиме 13. Це дозволяє розробникам створювати функціонал, який реагує на певні клавіші або комбінації клавіш. Для сучасної кросбраузерної підтримки рекомендується використовувати key або code, а which застосовувати тільки в тих випадках, коли важлива підтримка старих браузерів.

Таким чином, властивість which є корисною для базових задач обробки подій клавіатури, однак для складніших завдань краще використовувати більш сучасні інструменти.

правити

Порада

При роботі з властивістю which у додатках, де важлива підтримка сучасних браузерів, можна комбінувати її з event.key або event.code. Це забезпечить кращу сумісність і дозволить вам обробляти різні розкладки клавіатури.

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

Порада

Якщо вам потрібно обробляти клавіші з особливим значенням, такі як стрілки або функціональні клавіші (F1-F12), властивість which також може бути використана. Наприклад, клавіші стрілок мають значення 37, 38, 39 і 40 відповідно до напрямку.

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

Порада

Завжди перевіряйте сумісність властивості which з різними операційними системами та браузерами. У деяких старих версіях браузерів мобільні клавіатури можуть не передавати значення which коректно.

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

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

Синтаксис

event.which

Переглядачі

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

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

Переглядач
	1	1	1	15	79

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

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

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

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

Приклади

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

document.addEventListener('keydown', function(event) {
  switch (event.which) {
    case 37:
      console.log('Перехід на попередню сторінку.');
      // Логіка для переміщення назад
      break;
    case 39:
      console.log('Перехід на наступну сторінку.');
      // Логіка для переміщення вперед
      break;
  }
});

document.addEventListener('keydown', function(event) {
  if (event.which === 70 && event.ctrlKey) {
    event.preventDefault();
    console.log('Натиснуто Ctrl + F для пошуку.');
    // Логіка для відкриття форми пошуку
  }
});