Simple Ways to Detect Caps Lock in Your Web App

When users enter passwords or other sensitive information in a web application, it's crucial to provide them with the best possible experience. One common issue is the accidental activation of Caps Lock, which can lead to failed login attempts and user frustration. In this blog, we’ll explore simple ways to detect Caps Lock using JavaScript to improve your application's usability and security.

1. Using the keydown and keyup Events

One straightforward method to detect Caps Lock is by listening to the keydown and keyup events. By checking the state of the event.getModifierState('CapsLock'), you can determine if Caps Lock is active.

Here’s an example:

document.addEventListener('keydown', function(event) {
    if (event.getModifierState('CapsLock')) {
        console.log('Caps Lock is ON');
        // Show a message to the user
    } else {
        console.log('Caps Lock is OFF');
        // Hide the message
    }
});

2. Checking the event.which Value

Another way to detect Caps Lock is by examining the event.which value during a keypress event. This method involves comparing the ASCII values of lowercase and uppercase characters.

Example:

document.addEventListener('keypress', function(event) {
    let charCode = event.which || event.keyCode;
    let character = String.fromCharCode(charCode);

    if (character.toUpperCase() === character && character.toLowerCase() !== character && !event.shiftKey) {
        console.log('Caps Lock is ON');
        // Display warning to the user
    } else {
        console.log('Caps Lock is OFF');
        // Hide the warning
    }
});

3. Combining keydown, keyup, and keypress Events

For a more robust solution, you can combine the keydown, keyup, and keypress events to cover all possible scenarios, ensuring accurate detection of Caps Lock.

Example:

let isCapsLockOn = false;

document.addEventListener('keydown', function(event) {
    if (event.getModifierState('CapsLock')) {
        isCapsLockOn = true;
        console.log('Caps Lock is ON');
    } else {
        isCapsLockOn = false;
        console.log('Caps Lock is OFF');
    }
});

document.addEventListener('keypress', function(event) {
    let charCode = event.which || event.keyCode;
    let character = String.fromCharCode(charCode);

    if (character.toUpperCase() === character && character.toLowerCase() !== character && !event.shiftKey) {
        if (!isCapsLockOn) {
            isCapsLockOn = true;
            console.log('Caps Lock is ON');
        }
    }
});

Complete Example Code

You can find the full example code for detecting Caps Lock in your web app here on GitHub Gist.

If you found this article helpful, please give it a heart ❤️ and follow me for more JavaScript tricks and tips!