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

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

location — це властивість об'єкта KeyboardEvent, яка визначає фізичне розташування натиснутої клавіші на клавіатурі. Вона повертає числове значення, яке описує, на якій частині клавіатури натиснута клавіша. Властивість корисна для визначення конкретної клавіші, коли є кілька варіантів тієї самої клавіші, таких як Shift, Alt, або Control, розташованих як зліва, так і справа. Наприклад, лівий і правий Shift мають однаковий код, але різні значення location.

Значення location можуть бути наступними:

0 (DOM_KEY_LOCATION_STANDARD): клавіша є частиною основної секції клавіатури, як-от цифри або букви.
1 (DOM_KEY_LOCATION_LEFT): клавіша на лівій частині клавіатури (наприклад, лівий Shift).
2 (DOM_KEY_LOCATION_RIGHT): клавіша на правій частині клавіатури (наприклад, правий Shift).
3 (DOM_KEY_LOCATION_NUMPAD): клавіша на цифровій клавіатурі (наприклад, цифри на цифровому блоці).

Властивість location дозволяє реалізувати специфічні функціональні можливості для клавіш залежно від їхнього розташування. Наприклад, можна використовувати її для розрізнення лівого і правого Control, щоб надати їм різні функції.

document.addEventListener('keydown', (event) => {
  if (event.location === 1) {
    console.log('Ліва клавіша натиснута');
  } else if (event.location === 2) {
    console.log('Права клавіша натиснута');
  }
});

Цей приклад відстежує, з якого боку клавіатури була натиснута клавіша Shift, Control або інші модифікатори, надаючи більше можливостей для управління взаємодією з клавіатурою. За допомогою цієї властивості ви можете реалізувати кастомні скорочення, враховуючи сторону натискання клавіші.

Порада:	Якщо ви розробляєте гру або програму з важливою підтримкою клавіатури, використовуйте `location` для управління цифровою клавіатурою окремо від основної клавіатури. Це дозволить вам враховувати специфічні цифрові клавіші та не змішувати їх з іншими.
Порада:	Розрізнення лівої та правої клавіш може бути корисним для додатків із глибокими можливостями налаштування. Наприклад, можна призначити різні команди для лівого та правого `Alt`, створивши окремі шляхи обробки для обох варіантів.
Порада:	`location` не завжди повертає значення для кожної клавіші. Наприклад, звичайні букви та цифри повернуть значення `0`. Перевіряйте цю властивість лише для тих клавіш, які можуть мати відмінності в розташуванні (модифікатори та цифровий блок).

Синтаксис

event.location

Значення

Return

Переглядачі

Переглядач
	30	15	8	17	12

Переглядач
	4.4	30	15	8

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

Приклади

Цей код відстежує натискання клавіш Shift, Alt та Control, використовуючи location, щоб відрізняти ліві, праві та центральні клавіші. Повідомлення з вказівкою на сторону клавіші виводиться в елементі output, дозволяючи користувачу побачити результат. Це корисно для розробки інтерфейсів, де ліві та праві модифікатори мають різні функції.


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

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

document.addEventListener('keydown', (event) => {
  if (event.key >= '0' && event.key <= '9' && event.location === 3) {
    console.log('Цифра з цифрового блоку:', event.key);
  } else if (event.key >= '0' && event.key <= '9') {
    console.log('Цифра з основної клавіатури:', event.key);
  }
});

Цей приклад показує, як можна реалізувати різні функції залежно від того, з якої сторони натиснуто клавішу Shift. Така логіка корисна для додатків, які використовують різні команди для лівого і правого Shift.

document.addEventListener('keydown', (event) => {
  if (event.key === 'Shift' && event.location === 1) {
    console.log('Натиснуто лівий Shift: активація функції A.');
  } else if (event.key === 'Shift' && event.location === 2) {
    console.log('Натиснуто правий Shift: активація функції B.');
  }
});

JS довідник

JavaScript

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