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

JavascriptWeb DevelopmentObject Oriented Programming

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

Example

 Live Demo

<!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 −

raja
Published on 06-May-2020 13:32:30
Advertisements