Detect Caps Lock with JavaScript

Anybody is able to having their caps lock key on at any given time with out realizing so. Customers can simply spot undesirable caps lock when typing in most inputs, however when utilizing a password enter, the issue is not so apparent. That results in the person’s password being incorrect, which is an annoyance. Ideally builders might let the person know their caps lock secret’s activated.

To detect if a person has their keyboard’s caps lock activate, we’ll make use of KeyboardEvent‘s getModifierState methodology:

doc.querySelector('enter[type=password]').addEventListener('keyup', perform (keyboardEvent) {
    const capsLockOn = keyboardEvent.getModifierState('CapsLock');
    if (capsLockOn) {
        // Warn the person that their caps lock is on?

I might by no means seen getModifierState used earlier than, so I explored the W3C documentation to find different helpful 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 supplies a wealth of perception as to the person’s keyboard throughout key-centric occasions. I want I had identified about getModifier earlier in my profession!

  • Write Simple, Elegant and Maintainable Media Queries with Sass
  • 5 HTML5 APIs You Didn’t Know Existed

    While you say or learn “HTML5”, you half anticipate unique dancers and unicorns to stroll into the room to the tune of “I am Attractive and I Know It.”  Are you able to blame us although?  We watched the basic APIs stagnate for therefore lengthy {that a} fundamental function…

  • Skype-Style Buttons Using MooTools
  • Create a 3D Panorama Image with A-Frame

    Within the 5 years I have been at Mozilla I’ve seen some superior initiatives.  A few of them very talked-about, a few of them very area of interest, however none of them has impressed me the best way the MozVR staff’s work with WebVR and A-Body venture have. A-Body is a group venture…

Recent Articles

Related Stories

Leave A Reply

Please enter your comment!
Please enter your name here