Хочешь проверить свои знания по JS?
Подпишись на наш канал с тестами по JS в Telegram!
×
Перевод заметки «Detect Caps Lock with JavaScript».
Кто угодно может нажать Caps Lock в любой момент времени и не заметить этого. Вводя обычный текст, пользователи легко обнаруживают, что Caps Lock включен. Но когда вводится пароль, проблема не столь очевидна. В результате пароль не принимается, и это раздражает пользователя. В идеале разработчики могли бы предупреждать пользователя о том, что у него включен Caps Lock.
Чтобы отслеживать, включен ли Caps Lock, мы используем метод getModifierState:
document.querySelector(‘input[type=password]’).addEventListener(‘keyup’, function (keyboardEvent) {
const capsLockOn = keyboardEvent.getModifierState(‘CapsLock’);
if (capsLockOn) {
// Предупредить пользователя, что caps lock включен?
}
});
Я прежде никогда не встречал getModifierState, так что заглянул в документацию W3C, чтобы познакомиться с его значениями:
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;
};
getModifierState позволяет получить множество сведений о клавиатуре пользователя во время событий, ориентированных на нажатие клавиш. Жаль, что я не знал о getModifier в начале своей карьеры!
Запись Как при помощи JavaScript определить, включен ли Caps Lock впервые появилась Techrocks.