How to Detect if CAPS Lock is ON using JavaScript?

JavascriptWeb DevelopmentFront End Technology

In this article, we are going to explore the CAPS LOCK key and how to check if they are turned on or not using JavaScript on a webpage. While working with new-age web applications, we often require certain information including user interaction and experience.

The user interacts with a website to execute a functionality like hitting an API, handling clicks or buttons that trigger a method, and many more. In some of the cases, we might need to know whether the CAPS LOCK key is turned on or not.

One use case can be any authentication system that notifies the user that the CAPS LOCK key is on and it might interfere with the user’s password. Hopefully, JavaScript provides a method to check and work around the caps lock key.

Keyboard Event − In this type of Web API, the user interacts with the keyboard and the various events describe the kind of activity that occurs due to it.

Keydown Event − This is fired when a key is pressed.

KeyUp Event − This is fired when a key is released.

These events mainly occur from the keyboard that comes under the KeyboardEvent Object.

Modifier Keys: We also have modifier keys that are used in conjunction with other keys which perform some special purpose or shortcut to trigger the method. There are two types of Modifier Keys that are activated on pressing. For example, Shift, Ctrl, Alt, etc. Some other keys that activate locks on pressing include CAPS LOCK.

GetModifierState − We can use this method from the KeyboardEvent object that returns a Boolean when the modifier key is activated.

Syntax

const isActive = event.getModifierState(keyString);

It will return a Boolean variable showing whether the key is activated or not.

Example

In the below example, we are creating a simple HTML page that will have an input box. The input box will take character input from the user and whenever any input is made it will call the JavaScript function that will return true or false based upon the CAPS LOCK key. If the CAPS LOCK key is on, it will return true, else false.

In the script, we are simply extracting the input element that adds an event listener. Whenever an event is triggered, it reads the required details and returns the output.

# filter.js

<!DOCTYPE html>
<html lang="en">
<head>
   <title>CapsLock Detecter</title>
</head>
<body>
   <h1 style="color: green;">Welcome To Tutorials Point</h1>
   <div>Enter Some Text: <input id="text" type="text" /></div>
   <p id="warn" style="display:none; color:red">
      Warning: CapsLock Key is On!
   </p>
   <script type="text/javascript">
      // Get the input field
      const input = document.getElementById("text");
      // Get the warning warnText
      const warnText = document.getElementById("warn");
      // add event listener to input
      input.addEventListener("keyup", function(event) {
         // If capslock is pressed, display the warnText
         if (event.getModifierState("CapsLock")) {
            warnText.style.display = "block";
         } else {
            warnText.style.display = "none";
         }
      });
   </script>
</body>
</html>

When CapsLock is on there will be a warning “Warning: CapsLock Key is On!”

Output

raja
Updated on 26-Apr-2022 07:51:22

Advertisements