Computer >> Computer tutorials >  >> Programming >> Javascript

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


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 −

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

On typing something in the input field with capslock on −

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