Anyone is capable of having their caps lock key on at any given time without realizing so. Users can easily spot unwanted caps lock when typing in most inputs, but when using a password
input
, the problem isn’t so obvious. That leads to the user’s password being incorrect, which is an annoyance. Ideally developers could let the user know their caps lock key is activated.
To detect if a user has their keyboard’s caps lock turn on, we’ll employ KeyboardEvent
‘s getModifierState
method:
document.querySelector('input[type=password]').addEventListener('keyup', function (keyboardEvent) { const capsLockOn = keyboardEvent.getModifierState('CapsLock'); if (capsLockOn) { // Warn the user that their caps lock is on? } });
I’d never seen getModifierState
used before, so I explored the W3C documentation to discover other useful values:
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
provides a wealth of insight as to the user’s keyboard during key-centric events. I wish I had known about getModifier
earlier in my career!
5 Awesome New Mozilla Technologies You’ve Never Heard Of
My trip to Mozilla Summit 2013 was incredible. I’ve spent so much time focusing on my project that I had lost sight of all of the great work Mozillians were putting out. MozSummit provided the perfect reminder of how brilliant my colleagues are and how much…
CSS Sprites
The idea of CSS sprites is pretty genius. For those of you who don’t know the idea of a sprite, a sprite is basically multiple graphics compiled into one image. The advantages of using sprites are: Fewer images for the browser to download, which means…
Adding Events to Adding Events in MooTools
Note: This post has been updated. One of my huge web peeves is when an element has click events attached to it but the element doesn’t sport the “pointer” cursor. I mean how the hell is the user supposed to know they can/should click on…
Source link