In this section, we will examine the CAPS LOCK key and the implementation of JavaScript within a webpage to ascertain whether it is currently turned on or off. In the context of modern web applications, it is often essential to gather precise information regarding user engagement and their overall experience.
As a user navigates through a website, various functions are triggered, including invoking an API, handling button clicks that initiate a process, among other actions. In certain scenarios, it may be necessary to determine whether the caps lock key is currently engaged or not.
One practical application of an authentication framework is to notify users when the CAPS LOCK key is engaged, as this may impact the accuracy of their password entry. It is essential to implement a mechanism in JavaScript that can detect and prevent issues related to the CAPS LOCK key being active.
KeyboardEvent
This Web API employs it to manage interactions via the keyboard. The various events correspond to distinct types of actions that have occurred.
- Keydown : Activated when a key is pressed down.
- Keyup : Occurs when a key is released.
The KeyboardEvent object pertains to the event triggered by keyboard actions.
- Keys designated for Modifiers:
Modifier keys such as Shift, Ctrl, and Alt can be classified into two distinct categories, as they stay engaged once activated. In contrast, keys like Caps Lock and certain others are toggled on when pressed and turned off with a subsequent press. These modifier keys, in conjunction with other keys, serve specific purposes or create keyboard shortcuts.
- getModifierState:
The method of the KeyboardEvent object produces a boolean value that signifies whether the designated modifier key was engaged at the time of the event.
Syntax
The syntax provided below is useful for determining whether the caps lock key is activated or deactivated.
const cdVar = event.getModifierState(keyString);
- 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 status of the Caps Lock key, whether it is activated or deactivated, can be determined by following the steps outlined below.
Step 1: Utilize an HTML page to establish a user interaction element and present the results.
<input id="writeValue " value="Write Here...">
<p id="output_text">Caps lock is ON.</p>
Step 2: employs the JavaScript page method in conjunction with the addEventListener function.
var input_tag = document.getElementById("writeValue");
Input_tag.addEventListener("keyup", function(event) { //write js code )};
Step 3: In JavaScript, implement the syntax to identify the caps lock key.
if (event.getModifierState("CapsLock")) {
//write display or output data.
}
Step 4: Present the output information based on the status of the caps lock key, indicating whether it is activated or deactivated.
text.style.display = "block";
Examples
The provided examples illustrate the functionality of a JavaScript function along with user interaction capabilities. These examples are designed to determine whether the caps lock key is activated or deactivated.
Example1
The fundamental JavaScript demonstration illustrates that the caps lock key is activated once the user enters 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 images presented below indicate whether the caps lock feature is activated or deactivated through the use of text.
Output1
Before clicking the caps lock button
Output2
After clicking the caps lock button
Example 2
The fundamental JavaScript illustration demonstrates whether the caps lock key is activated or deactivated upon entering the input field. When the caps lock key is pressed, its status is reflected on the button, and once the key is released, the button text changes to indicate that it 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>
<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 images displayed below illustrate whether the caps lock feature is activated or deactivated through textual representation.
Output1
After clicking the caps lock button
Output2
After releasing the caps lock button
Example 3
The fundamental JavaScript illustration demonstrates whether the caps lock key is activated or deactivated by validating a form. In this instance, we implement the validation for the caps lock key. An error message will be dispatched if the caps lock key is not engaged.
<!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 images displayed below indicate whether the caps lock feature is activated or deactivated through textual representation.
Output1
After clicking the caps lock button
Output2
After releasing the caps lock button
Conclusion
The caps lock key plays a crucial role in input fields, including those for usernames, email addresses, and passwords. JavaScript provides a straightforward and effective way to determine the status of the caps lock key, whether it is activated or deactivated. This functionality is beneficial for both users and developers, enhancing user interaction and ensuring the submission of accurate information.