How to find out if capslock is on inside an input field with JavaScript?

Javascript Web Development Object Oriented Programming

To find out if capslock is on inside an input field with JavaScript, the code is as follows −

Example

<!DOCTYPE html>
<html>
<head>
<style>
   #textBox {
      display: none;
      color: red;
   }
</style>
<body>
<h1>Detecting Caps Lock Example</h1>
<input class="inputfield" value="Some textBox.." />
<h2>Press caps lock in the above input field to check warning</h2>
<h2 class="textBox">WARNING! Caps lock is ON.</h2>
<script>
   var input = document.querySelector(".inputfield");
   var textBox = document.querySelector(".textBox");
   input.addEventListener("keyup", event => {
      if (event.getModifierState("CapsLock")) {
         textBox.style.display = "block";
      } else {
         textBox.style.display = "none";
      }
   });
</script>
</body>
</html>

Output

The above code will produce the following output −

On typing something in the input field with capslock on −

AmitDiwan

Updated on: 06-May-2020

128 Views

Kickstart Your Career

Get certified by completing the course

Get Started