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
This article makes the following assumptions
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.
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.
First we create references to our password field as well as our error text in the DOM utilizing
If utilizing jQuery, the ID can be passed directly to the
$() constructor and the jQuery element functions
.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
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.
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.