Поле, що попереджає про включене CapsLock

Створіть поле, яке попереджатиме користувача, якщо увімкнено CapsLock . Вимкнення CapsLock прибере попередження.

Таке поле допоможе уникнути помилок при введенні пароля.

Але ми можемо здогадатися про його стан подій:

1. Перевіривши символ, отриманий keypress . Символ у верхньому регістрі без натиснутого Shift означає, що включено CapsLock . Аналогічно, символ у нижньому регістрі, але з Shift говорять про включений CapsLock. Властивість event.shiftKey показує, чи Shift натиснути . Так ми можемо точно дізнатися, чи натиснути CapsLock .
2. Перевіряти keydown. Якщо натиснутий CapsLock (скан-код дорівнює 20), то переключити стан, але лише у тому випадку, коли він вже відомий. Під Mac так не вийде, оскільки клавіатурні події з CapsLock працюють некоректно.

Маючи стан CapsLock у змінній, можна під час фокусування на INPUT видавати попередження.

Відстежувати обидві події: keydown і keypress добре на рівні документа, щоб вже на момент входу в поле введення ми знали стан CapsLock.

При завантаженні сторінки, коли ще нічого не набрано, ми нічого не знаємо про стан CapsLock, тому воно одно null:

Коли натиснуто клавішу, ми можемо спробувати перевірити, чи збігається регістр символу та стан Shift :

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

Наприклад, коли користувач відкрив сторінку, ми не знаємо, чи увімкнено CapsLock . Потім, ми отримуємо подію keydown для CapsLock . Але ми все одно не знаємо його стану, чи CapsLock був вимкнений або, навпаки, включений.

Тепер поле. Завдання полягає в тому, щоб попередити користувача про включений CapsLock, щобуберегти його від неправильного введення.

Спочатку, коли користувач сфокусувався на полі, ми повинні вивести попередження про CapsLock, якщо він увімкнений.

Користувач починає введення. Кожна подія keypress спливає до обробника document.keypress, який оновлює стан capsLockEnabled.

Ми не можемо використовувати подію input.onkeypress для відображення стану користувача, тому що вона спрацює до document.onkeypress (через спливання) і, отже, до того, як ми дізнаємося про стан CapsLock .

Є багато способів вирішити цю проблему. Наприклад, можна призначити обробник стану CapsLock на подію input.onkeyup . Тобто індикація буде із затримкою, але це несуттєво.

Альтернативне рішення – додати на input такий самий обробник, як і на document.onkeypress.

…І нарешті, користувач прибирає фокус із поля. Попередження може бути видно, якщо CapsLock увімкнено, але оскільки користувач вже пішов з поля, то нам потрібно сховати попередження.

---