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!
Creating Scrolling Parallax Effects with CSS
Introduction For quite a long time now websites with the so called “parallax” effect have been really popular. In case you have not heard of this effect, it basically includes different layers of images that are moving in different directions or with different speed. This leads to a…
5 HTML5 APIs You Didn’t Know Existed
When you say or read “HTML5”, you half expect exotic dancers and unicorns to walk into the room to the tune of “I’m Sexy and I Know It.” Can you blame us though? We watched the fundamental APIs stagnate for so long that a basic feature…
MooTools Zebra Table Plugin
I released my first MooTools class over a year ago. It was a really minimalistic approach to zebra tables and a great first class to write. I took some time to update and improve the class. The XHTML You may have as many tables as…
Fancy Navigation with MooTools JavaScript
Navigation menus are traditionally boring, right? Most of the time the navigation menu consists of some imagery with a corresponding mouseover image. Where’s the originality? I’ve created a fancy navigation menu that highlights navigation items and creates a chain effect. The XHTML Just some simple…
Source link
