Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
How to Detect if CAPS Lock is ON using JavaScript?
In this article, we are going to explore the CAPS LOCK key and how to check if it is turned on or not using JavaScript on a webpage. While working with modern web applications, we often require information about user interaction and experience.
The user interacts with a website to execute functionality like hitting an API, handling clicks or buttons that trigger methods, and many more. In some 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. Fortunately, JavaScript provides a method to check and work around the caps lock key.
Keyboard Events Overview
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 and getModifierState()
Modifier Keys: We also have modifier keys that are used in conjunction with other keys which perform some special purpose or shortcut to trigger methods. 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: CAPS LOCK Detection
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.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CapsLock Detector</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 text
const warnText = document.getElementById("warn");
// Add event listener to input
input.addEventListener("keyup", function(event) {
// If capslock is pressed, display the warning
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!" displayed below the input field.
Alternative Approach: Using keydown Event
You can also detect CAPS LOCK state using the keydown event for more immediate feedback:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CapsLock Detector - Keydown</title>
</head>
<body>
<h1>Type in the input field:</h1>
<input id="textInput" type="text" placeholder="Start typing...">
<p id="status" style="font-weight: bold;"></p>
<script>
const textInput = document.getElementById("textInput");
const status = document.getElementById("status");
textInput.addEventListener("keydown", function(event) {
if (event.getModifierState("CapsLock")) {
status.textContent = "CAPS LOCK is ON";
status.style.color = "red";
} else {
status.textContent = "CAPS LOCK is OFF";
status.style.color = "green";
}
});
</script>
</body>
</html>
Key Points
- The
getModifierState("CapsLock")method returnstruewhen CAPS LOCK is active - Both
keyupandkeydownevents can be used to detect CAPS LOCK state - This method works across modern browsers and provides reliable CAPS LOCK detection
- Common use cases include password fields, form validation, and user experience improvements
Output
When you type in the input field with CAPS LOCK enabled, the warning message appears. When CAPS LOCK is disabled, the warning disappears automatically.
Conclusion
The getModifierState("CapsLock") method provides a reliable way to detect CAPS LOCK state in JavaScript. This is particularly useful for improving user experience in forms and authentication systems.
979 Views
