css.in.ua
Підтримати

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, дозволяючи користувачу побачити результат. Це корисно для розробки інтерфейсів, де ліві та праві модифікатори мають різні функції.

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

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.');
  }
});

Спільнота

Зв'язок