How to detect uppercase lock

Learn how to use JavaScript to detect if the uppercase lock is open in the input box.

Check if the uppercase lock is turned on

Try pressing the "Caps Lock" key in the input box:

WARNING! Caps lock is ON.

Example

// Get the input field
var input = document.getElementById("myInput");
// Get the warning text
var text = document.getElementById("text");
// Run this function when the user presses any key on the keyboard
input.addEventListener("keyup", function(event) {
  // If "Caps Lock" is pressed, display the warning text
  if (event.getModifierState("CapsLock")) {
    text.style.display = "block";
  } else {
    text.style.display = "none"
  }
);

Try it yourself

Related Pages

Reference Manual:MouseEvent getModifierState() Method