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, що дозволяє визначати статус цих клавіш під час роботи. Метод є зручним для інтерактивних додатків, оскільки дозволяє створити повністю кастомізовану систему шорткатів та спрощує управління в інтерфейсах.
| Порада: | Враховуйте відмінності між |
| Порада: | Метод добре підходить для роботи зі складними комбінаціями клавіш, наприклад |
| Порада: | Якщо виникають проблеми із запуском подій через поєднання клавіш, використовуйте |
Синтаксис
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 активний!');
}
});