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!
Create Namespaced Classes with MooTools
MooTools has always gotten a bit of grief for not inherently using and standardizing namespaced-based JavaScript classes like the Dojo Toolkit does. Many developers create their classes as globals which is generally frowned up. I mostly disagree with that stance, but each to their own. In any event…
Implement jQuery’s hover() Method in MooTools
jQuery offers a quick event shortcut method called hover that accepts two functions that represent mouseover and mouseout actions. Here’s how to implement that for MooTools Elements. The MooTools JavaScript We implement hover() which accepts to functions; one will be called on mouseenter and the other…
MooTools: Set Style Per Media
I’d bet one of the most used MooTools methods is the
setStyle()method, which allows you to set CSS style declarations for an element. One of the limitations of MooTools’setStyle()method is that it sets the specific style for all medias.
