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

правити

Порада

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

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

Порада

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

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

Порада

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

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

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

Синтаксис

event.getModifierState(key)

Повернення

boolean

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

автор: Bond

правити

Переглядачі

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

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

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

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

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

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

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

Приклади

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

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

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