Detecting Caps Lock with JavaScript

How to warn users when they may be inappropriately using Caps Lock.

With switching between my full sized keyboard at work and the much smaller keyboard of my Asus Zenbook at home, I’m constantly accidentally turning on caps lock.

Windows will warn you when caps lock is enabled on the login screen. Ubuntu Linux, on the other hand, does not which leads to daily failed login attempts. Let’s take a look at how we can alert our users and avoid this particular UX problem on our sites.

What We’re Building

We will be building a very simple form utilizing HTML, CSS, and JavaScript to warn the user when they have caps lock on when entering their password in a login form.

The code will involve vanilla JavaScript, HTML, and Bootstrap with a few custom styles.

Prerequisites

This article makes the following assumptions

  • You are familiar with basic HTML, CSS, and JavaScript

Completed Code

The full code is available here on CodePen.

Project Setup: HTML and CSS

This article will be written from the context of using CodePen, but you can easily follow along with a local HTML file as well.

First, create a new Codepen, and paste in the following HTML contents:

Aesthetics are not the focus here, but that doesn’t mean we can’t have something sort of pretty to look at. Paste the following to the CSS editor:

The last step will be to add the following URL for Bootstrap in the external stylesheets section under Pen Settings > CSS.

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.2/css/bootstrap.min.css

You should now have a layout and design more or less identical to the opening image, but without the error text as we have added the Bootstrap d-none class to hide it.

The Magic Sauce

The magic sauce of our implementation will be the getModifiedState() function located on the KeyboardEvent prototype. It allows us to specify common modifier keys such as shift, caps lock, or num lock and get True if the provided modifier key is on or was pressed and false otherwise.

For more information on this function, see the MDN documentation.

The Code

First we create references to our password field as well as our error text in the DOM utilizing getElementById.

If utilizing jQuery, the ID can be passed directly to the $() constructor and the jQuery element functions .removeClass and .addClass used instead.

We then assign a handler function for the onkeydown event of our password field. Then next is a simple check that verifies whether or not cap locks was on during the last key press by using the aforementioned getModifierState function.

If the caps lock modifier is on, we remove the class hiding the element, while adding the class to hide it if caps lock is not on. Now if you utilize the caps lock button or caps locks is enabled when you begin typing, it will reveal the error message.

Conclusion

Thanks for taking the time to read this far. There are a few improvements that could be made, but you should now understand the gist of warning the users they may be messing up the entry of their password. This could just as easily be applied to any form with case sensitive content:

A few potential improvements

  • Checking for the class name to exist or not exist before each event action instead of repeating unnecessary add or remove actions
  • Utilize a check of shift key instead of caps lock to serve older Android browsers ( < 3.0 ) that don’t support checking with caps lock.
  • Force the user to clear the input box before error is removed rather than when caps lock is disabled.

Special thanks to Paul and Robert for helping me when I was barking up the wrong tree with a bunch of code I didn’t need to have.