🔠🔒 JavaScript: Як перевірити, чи увімкнений Caps Lock у користувача

🔍 Проблема

Будь-хто може випадково залишити Caps Lock увімкненим і не помітити цього. У звичайних текстових полях користувачі легко бачать великі літери, але у полі пароля (<input type="password">) це не так очевидно. В результаті введений пароль може бути некоректним, що спричиняє незручності.

Було б чудово, якби розробники могли попереджати користувачів про активований Caps Lock. Давайте розглянемо, як це зробити за допомогою JavaScript.

🎯 Визначаємо Caps Lock за допомогою getModifierState

Для визначення, чи Caps Lock увімкнений, ми можемо скористатися методом getModifierState з KeyboardEvent:

document.querySelector('input[type="password"]').addEventListener('keyup', function (event) {
    const capsLockOn = event.getModifierState('CapsLock');
    if (capsLockOn) {
        alert("⚠️ Увага! Caps Lock увімкнений.");
    }
});

🔹 Як це працює?

• Відстежуємо подію keyup у полі пароля.
• Використовуємо getModifierState('CapsLock'), щоб перевірити стан Caps Lock.
• Якщо Caps Lock увімкнений, ми можемо вивести попередження.

Ви можете показувати повідомлення користувачу у вигляді текстової підказки або змінювати стиль поля.

📖 Інші корисні значення getModifierState

Метод getModifierState може також перевіряти інші клавіші-модифікатори клавіатури:

dictionary EventModifierInit : UIEventInit {
  boolean ctrlKey = false;
  boolean shiftKey = false;
  boolean altKey = false;
  boolean metaKey = false;

  boolean modifierAltGraph = false;
  boolean modifierCapsLock = false;
  boolean modifierFn = false;
  boolean modifierFnLock = false;
  boolean modifierHyper = false;
  boolean modifierNumLock = false;
  boolean modifierScrollLock = false;
  boolean modifierSuper = false;
  boolean modifierSymbol = false;
  boolean modifierSymbolLock = false;
};

📌 Корисні комбінації:

• event.getModifierState('Shift') – чи натиснута клавіша Shift?
• event.getModifierState('Control') – чи натиснута Ctrl?
• event.getModifierState('Alt') – чи натиснута Alt?
• event.getModifierState('Meta') – чи натиснута клавіша Windows (Cmd на Mac)?
• event.getModifierState('NumLock') – чи ввімкнено Num Lock?

Ці можливості допомагають покращити роботу з клавіатурними подіями та створювати більш інтуїтивні інтерфейси.

🏁 Висновок

getModifierState дає змогу дізнатися про стан Caps Lock та інших клавіш-модифікаторів під час подій клавіатури. Це корисний інструмент для поліпшення UX, особливо при введенні паролів.

🚀 Використовуйте цей метод у своїх проєктах та покращуйте взаємодію з користувачем!