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

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

Порада

Розрізнення лівої та правої клавіш може бути корисним для додатків із глибокими можливостями налаштування. Наприклад, можна призначити різні команди для лівого та правого Alt, створивши окремі шляхи обробки для обох варіантів.

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

Порада

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

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

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

Синтаксис

event.location

Переглядачі

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

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

Переглядач
	144	—	—	128	144	—

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

Переглядач
	—	144	—	—

Приклади

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

<header>
  <h2 class="title">KeyboardEvent -> location</h2>
  <p class="description">Визначає фізичне розташування натиснутої клавіші.</p>
</header>
<main>
  <div class="result">
    <p>Натисніть клавішу <strong>Shift</strong>, <strong>Alt</strong> або <strong>Control</strong> для перевірки.</p>
    <p id="output">Результат з’явиться тут</p>
  </div>
</main>

body {
  font-size: 16px;
  line-height: 1.5;
  font-family: monospace;
}

header {
  background-color: #f1f1f1;
  margin-bottom: 25px;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

header h2.title {
  padding-bottom: 15px;
  border-bottom: 1px solid #999;
}

header p.description {
  font-style: italic;
  color: #222;
}

.result {
  background-color: #f8f8f8;
  padding: 15px;
  box-shadow: 0px 0px 3px 0px rgba(118, 118, 118, 1);
}

#output {
  font-weight: bold;
  color: #333;
  margin-top: 10px;
}

const output = document.getElementById('output');

document.addEventListener('keydown', event => {
  if (['Shift', 'Control', 'Alt'].includes(event.key)) {
    let side;
    switch (event.location) {
      case 1:
        side = 'ліва';
        break;
      case 2:
        side = 'права';
        break;
      default:
        side = 'центральна';}

    output.textContent = `Натиснуто ${side} клавішу ${event.key}.`;
  }
});
//# sourceURL=pen.js

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

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