Detect if the caps lock is on

Assume that we want to let users know if the caps lock is on while they are entering the value for an input (a password field, for example):

<input type="text" id="textbox" />

<div id="message" />

The element with id of message will be used to show the message.

1. Use the getModifierState() function

The getModifierState() function returns the state of given modifier key.
It can let us know if the CapsLock key is pressed by calling getModifierState('CapsLock') from the event object.

const textboxEle = document.getElementById('textbox');
const messageEle = document.getElementById('message');

textboxEle.addEventListener('keydown', function(e) {
const capsLockOn = e.getModifierState('CapsLock');

// Update the content of message
messageEle.innerHTML = capsLockOn ? 'Caps lock is ON' : '';

// Show or hide the message based on the CapsLock state
messageEle.style.display = capsLockOn ? 'block' : 'none';
});

This approach doesn't support the case that users press the Shift key.

2. Support the Shift key

The caps lock is treated as ON if users press

  • an uppercase letter without Shift
  • or an lowercase letter with Shift
const textboxEle = document.getElementById('textbox');
const messageEle = document.getElementById('message');

textboxEle.addEventListener('keypress', function(e) {
const isMac = /Mac/.test(navigator.platform);

const keyCode = e.keyCode || e.which;

// Is the _Shift_ key pressed?
const shiftKey = e.shiftKey || keyCode === 16;

// Get the pressed character
const s = String.fromCharCode(keyCode);
const capsLockOn =
(s.toUpperCase() === s && s.toLowerCase() !== s && !(shiftKey && isMac)) ||
(s.toUpperCase() !== s && s.toLowerCase() === s && shiftKey);

messageEle.innerHTML = capsLockOn ? 'Caps lock is ON' : '';
messageEle.style.display = capsLockOn ? 'block' : 'none';
});

More

Previous
Create one time event handler
Next
Detect internet explorer browser