How to detect Caps lock in JavaScript

dhruvangg

Dhruvang Gajjar

Posted on March 27, 2021

How to detect Caps lock in JavaScript

To check the caps lock status, you use the getModifierState() method of the KeyboardEvent object:

The getModifierState() method returns boolean. If modifier is active it returns true otherwise false

Here is a sample example of getModifierState() for password inputs where you can check the status of caps lock and return appropriate alert.

const password = document.querySelector("input[name=password]")

password.addEventListener('keyup', (event) => {
    if (event.getModifierState('CapsLock')) {
        alert('CapsLock is on')
    }
})
Enter fullscreen mode Exit fullscreen mode
πŸ’– πŸ’ͺ πŸ™… 🚩
dhruvangg
Dhruvang Gajjar

Posted on March 27, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related