Detect Caps Lock with JavaScript

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!

Vibration API
Many of the new APIs provided to us by browser vendors are more targeted toward the mobile user than the desktop user. One of those simple APIs the Vibration API. The Vibration API allows developers to direct the device, using JavaScript, to vibrate in…
9 Mind-Blowing WebGL Demos
As much as developers now loathe Flash, we’re still playing a bit of catch up to natively duplicate the animation capabilities that Adobe’s old technology provided us. Of course we have canvas, an awesome technology, one which I highlighted 9 mind-blowing demos. Another technology available…