snippetjavascriptTip

How can I detect if Caps Lock is on with JavaScript?

Submitted by: @import:30-seconds-of-code·Mar 2, 2026·

Viewed 0 times

javascriptdetecthowcapswithlockcan

Problem

Oftentimes, especially when creating password inputs, you need to check if the Caps Lock key is on and inform the user. You can do that using the KeyboardEvent.getModifierState() method with a value of 'CapsLock'. This means that you have to listen for a keyboard event on an element in order to check the state of the Caps Lock key:
As you can see from the above example, the 'keyup' event is used on our element of choice to then call KeyboardEvent.getModifierState() and determine the state of the 'CapsLock' key. 'keydown' and 'keypress' might also work. However, after testing on multiple devices, it seems that using 'keyup' is the preferred method as it works better across different OSes and browsers.

Solution

<form>
  <label for="username">Username:</label>
  <input id="username" name="username">

  <label for="password">Password:</label>
  <input id="password" name="password" type="password">
  <span id="password-message" style="display: none">Caps Lock is on</span>
</form>

Code Snippets

<form>
  <label for="username">Username:</label>
  <input id="username" name="username">

  <label for="password">Password:</label>
  <input id="password" name="password" type="password">
  <span id="password-message" style="display: none">Caps Lock is on</span>
</form>

const el = document.getElementById('password');
const msg = document.getElementById('password-message');

el.addEventListener('keyup', e => {
  msg.style = e.getModifierState('CapsLock')
    ? 'display: block'
    : 'display: none';
});

Context

From 30-seconds-of-code: detect-caps-lock-is-on

Revisions (0)

No revisions yet.