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!
Regular Expressions for the Rest of Us
Sooner or later you’ll run across a regular expression. With their cryptic syntax, confusing documentation and massive learning curve, most developers settle for copying and pasting them from StackOverflow and hoping they work. But what if you could decode regular expressions and harness their power? In…
Facebook Sliders With Mootools and CSS
One of the great parts of being a developer that uses Facebook is that I can get some great ideas for progressive website enhancement. Facebook incorporates many advanced JavaScript and AJAX features: photo loads by left and right arrow, dropdown menus, modal windows, and…
Redacted Font
Back when I created client websites, one of the many things that frustrated me was the initial design handoff. It would always go like this: Work hard to incorporate client’s ideas, dream up awesome design. Create said design, using Lorem Ipsum text Send initial design concept to the client…
Source link