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';
});

Detect if the caps lock is on

1. Use the getModifierState() function

2. Support the Shift key

See also