Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 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
669 Views
