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

JS метод Event.getModifierState()

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

getModifierState – це метод об’єкта KeyboardEvent, який дозволяє дізнатися, чи активована певна модифікаторна клавіша під час події клавіатури (такої як keydown або keyup). Модифікаторні клавіші включають Shift, Control, Alt, Meta та інші, які змінюють поведінку введення клавіш. Метод приймає єдиний параметр, назву клавіші у вигляді рядка (наприклад, 'Shift' або 'Control'), і повертає true, якщо вказана клавіша натиснута, і false, якщо ні.

Це корисний метод для реалізації дій або комбінацій клавіш, які залежать від модифікаторних клавіш. Наприклад, при обробці події keydown можна перевірити, чи натиснута клавіша Control разом з іншою клавішею, і виконати певну дію на основі цього. Таке використання може бути необхідним у додатках, де комбінації клавіш запускають різні команди, подібно до комбінацій Ctrl+C або Ctrl+V для копіювання та вставки.

document.addEventListener('keydown', function(event) {
   if (event.getModifierState('Control') && event.key === 's') {
       event.preventDefault();
       console.log('Збереження файлу ініційоване за допомогою Ctrl+S');
   }
});

У прикладі вище getModifierState використовується разом з подією keydown для перевірки, чи натиснута клавіша Control разом із клавішею s. Якщо обидві клавіші натиснуті, виконується дія збереження файлу. Використання getModifierState дозволяє вловити та обробити такі специфічні комбінації незалежно від платформи, а також полегшує створення подібних шорткатів у різних середовищах.

Крім основних модифікаторних клавіш, getModifierState також підтримує інші спеціальні клавіші, наприклад, CapsLock, NumLock, ScrollLock, що дозволяє визначати статус цих клавіш під час роботи. Метод є зручним для інтерактивних додатків, оскільки дозволяє створити повністю кастомізовану систему шорткатів та спрощує управління в інтерфейсах.

Порада:

Враховуйте відмінності між keydown та keyup – за допомогою getModifierState зручно відслідковувати комбінації клавіш, але кожна подія запускається незалежно, і це може вплинути на обробку швидких натискань.
Порада:

Метод добре підходить для роботи зі складними комбінаціями клавіш, наприклад Ctrl+Shift+Alt. Ви можете перевірити послідовність натискань, що спрощує створення інтерфейсів для управління складними функціями.
Порада:

Якщо виникають проблеми із запуском подій через поєднання клавіш, використовуйте preventDefault() у поєднанні з getModifierState, щоб уникнути стандартних дій браузера, таких як оновлення сторінки при натисканні Ctrl+R.

Синтаксис

event.getModifierState(key)

Параметри

Return

boolean

Повертає булеве значення (true або false), що вказує, чи перебуває певна клавіша-модифікатор (як-от Shift, Control, Alt або Meta) у натиснутому стані під час події. Якщо вказана клавіша була натиснута, повертається true; якщо не натиснута – false.

Переглядачі

Переглядач

30

15

10.1

17

12
Переглядач

4.4

30

15

10.3
Переглядач

-

-

Приклади


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

Цей приклад демонструє використання getModifierState для створення комбінації Ctrl+Shift+Z, що зазвичай використовується для функції "redo" (повторення дії) у додатках. Це корисно, якщо ви хочете додати шорткати для скасування та повторення дій у власному додатку.

document.addEventListener('keydown', function(event) {
   if (event.getModifierState('Control') && event.getModifierState('Shift') && event.key === 'Z') {
       console.log('Скасування змін (redo) виконано за допомогою Ctrl+Shift+Z');
   }
});

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

document.addEventListener('keydown', function(event) {
   if (event.getModifierState('CapsLock')) {
       console.log('Увага: CapsLock активний!');
   }
});

Спільнота

Зв'язок