Detect or Check Caps Lock Key is ON or OFF using JavaScript

We will investigate the CAPS LOCK key and the use of JavaScript on a webpage to determine if it is activated or not. When dealing with cutting-edge online apps, we frequently need specific data, such as user experience and interaction.

When a user browses a website, functionality is executed, such as calling an API, managing clicks of buttons that launch a procedure, and many more. We may need to know if the caps lock key is activated or not.

The authentication system that alerts the user when the CAPS LOCK key is activated and could affect the user's password is one use case. There should be a way to check for and avoid the caps lock key in JavaScript.

KeyboardEvent

This Web API utilizes it to handle keyboard user interaction. The different events explain the different types of activities that have taken place.

Keydown: Invoked when a key is pressed.
Keyup: triggered upon the release of a key.

KeyboardEvent object refers to the event that is caused by the keyboard.

Keys for Modifiers:

Shift, Ctrl, Alt, and other modifier keys fall into one of two categories and remain active after being pushed. The other ones include capslock and other keys that are enabled when pushed and deactivated when pressed again. Together with other keys, these keys are utilized for a specific function or keyboard shortcut.

getModifierState:

The KeyboardEvent object's method returns a boolean indicating whether or not the specified modifier key was activated during the event.

Syntax

The following syntax helps to detect capslock key is on or off.

The keystring shows the "capslock" value as output when the key is pressed.
Using the keystring value, we can display data as an output.

How to Detect Caps Lock is ON.

The detect caps lock key is on or off shown using the below steps.

Step 1: use html page to create a user interaction tag and display output.

<input id="writeValue " value="Write Here...">
<p id="output_text">Caps lock is ON.</p>

Step 2: uses the JavaScript page method with the addEventLister function.

var input_tag = document.getElementById("writeValue");
Input_tag.addEventListener("keyup", function(event) { //write js code )};

Step 3: In JavaScript, use the syntax of the detect capslock key.

if (event.getModifierState("CapsLock")) {
    //write display or output data.
  }

Step 4: Display the output information according to whether the caps lock key is on or off.

Examples

The given examples identify the JavaScript function and user interaction functionality. The examples help to detect caps lock button is on or off.

Example1

The basic JavaScript example shows caps lock button is on after entering the input field.

<!DOCTYPE html>
<html>
<style>
#output_text {
display: none;
color: red
}
</style>
<body>
<h2> Detect Caps Lock Key </h2>
<p> Press the "Caps Lock" key after starting to type in the input field function.</p>
<input id = "writeValue" placeholder = "Write Here...">
<p id = "output_text"> Caps lock is ON. </p>
<script>
var input_val = document.getElementById("writeValue");
var output_text = document.getElementById("output_text");
input_val.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
    output_text.style.display = "block";
  } else {
    output_text.style.display = "none"
  }
});
</script>
</body>
</html>

Output

The below images show the caps lock is on or off using text.

Output1

Before clicking the caps lock button

Detect or Check Caps Lock Key is ON or OFF using JavaScript

Output2

After clicking the caps lock button

Example 2

The basic JavaScript example shows caps lock button is on or off after entering the input field. After clicking on the caps lock button value shows on the button, and releasing button value shows off the button text.

<!DOCTYPE html>
<html>
<style>
p {
display: none;
color: red
}
</style>
<body>
<h2> Detect Caps Lock Key </h2>
<p> Press the "Caps Lock" key after starting to type in the input field function.</p>
<input id = "writeValue" placeholder = "Write Here...">
<p id = "output_text"> Caps lock is ON. </p>
<p id = "output_text1"> Caps lock is OFF. </p>
<script>
var input_val = document.getElementById("writeValue");
var output_text = document.getElementById("output_text");
var output_text1 = document.getElementById("output_text1");
input_val.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
    output_text.style.display = "block";
    output_text1.style.display = "none";
  } else {
    output_text1.style.display = "block";
    output_text.style.display = "none";
  }
});
</script>
</body>
</html>

Output

The below images show the caps lock is on or off using text.

Output1

After clicking the caps lock button

Output2

After releasing the caps lock button

Example 3

The basic JavaScript example shows caps lock button is on or off with the validation of the form. Here, we write the validation on the caps lock button. Send an error if the caps lock button is off.

<!DOCTYPE html>
<html>    
<style>
p {
display: none;
color: red
}
</style>
<body>
<h2> Detect Caps Lock Key </h2>
<p> Press the "Caps Lock" key after starting to type in the input field function.</p>
USER NAME: <input id = "writeValue" placeholder = "Write Here..."> 
<p id = "output_text"> Caps lock is ON. </p>
<br>
PASSWARD: <input type = "password" id = "writeValue1" placeholder = "Write Here...">
<p id = "output_text1"> Caps lock is ON. </p>
<br>
<input type = "button" value = "Submit"> 
<script>
var input_val = document.getElementById("writeValue");
var output_text = document.getElementById("output_text");
input_val.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
    output_text.style.display = "block";   
  }else{
  output_text.style.display = "none"; 
  }
});
var input_val1 = document.getElementById("writeValue1");
var output_text1 = document.getElementById("output_text1");
input_val1.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
    output_text1.style.display = "block";   
  }else{
  output_text1.style.display = "none"; 
  }
});
</script>
</body>
</html>

Outputs

The below images show the caps lock is on or off using text.

Output1

After clicking the caps lock button

Output2

After releasing the caps lock button

Conclusion

The caps lock key is essential for input fields such as a username, email id, and password data. JavaScript helps to detect or check whether the caps lock key is on / off in an easy and simple method. This function is useful for users and developers for the user-interaction functionality and for submitting authentic information.

Next TopicHow to Iterate through a JavaScript Object

← prev next →