How to detect caps lock key turned on or not ?
Last Updated :
30 Sep, 2021
While working with some kind of web application we often need to know various information about user interaction to execute our functionality accordingly i.e. we use APIs to handle button clicks, methods to listen to the keys, etc. Similarly, there may be some cases when we need to know whether Caps Lock is active or not. One use case of this can be the authentication system where the application notifies the user when caps lock is on during entering passwords. Hopefully, javascript provides methods and techniques to work around this situation and we are going to discuss all stuff in this article.
KeyboardEvent: This Web API is used to deal with the user interaction by keyboard, the various event describes which kind of activity is been occurred.
- keydown: Fired when a key is pressed.
- keyup: Fired when a key is released.
The event which occurs due to the keyboard comes under KeyboardEvent Object.
Modifier Keys: These keys are used in conjunction with other keys to perform some special purpose or shortcut. There are two types of modifier keys that remain activated when pressed i.e. shift, ctrl, alt, etc. The other ones are those which are activated when pressed and deactivated when pressed again i.e. capslock, etc.
getModifierState: This is the method of the KeyboardEvent object and returns a boolean on whether the given modifier key is activated or not during that event.
Syntax:
const isActive = event.getModifierState(keyString);
// It will return a boolean
// keyString: A string to be passed i.e. "Alt",
// "CapsLock", "Control", "NumLock", etc.
Example: Now we will detect whether the Capslock key is turned on or not. Here we are going to demonstrate a simple example in which we will detect the activation state of the caps lock key.
Step 1: Here we have created a simple HTML page that contains one div with some text and input elements and one paragraph to display warning text.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>CapsLock Detecter</title>
</head>
<body>
<div>Enter Some Text: <input id="text" type="text" /></div>
<p id="warn" style="display:none; color:red">
Warning: CapsLock is On!
</p>
<script src="./index.js"></script>
</body>
</html>
Step 2: This index.js file is attached in the script tag of the former HTML file. We are simply extracting the input element to add an event listener also we are extracting the warning text paragraph to change its style. After then we have passed a callback function to method addEventListener for "keyup" event. Inside that function, we are checking whether the caps lock key was turned on or when the key was released.
index.js
// 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";
}
});
Output: This would be the output of the above code snippet, each time when we press the key it would generate an event on the key release.Â
Â
Explanation: Here we have typed "abc" in starting as soon as we press the caps lock the event will generate and then the functionality detects it and changes that p element to appear. Again when we press caps lock the event will generate on the key release and functionality detects it, due to which next time when we will press any key the p tag will hide.Â
Similar Reads
How to check caps lock is on/off using JavaScript / jQuery ?
The job is to determine the caps lock is turned on or turned off using JavaScript and jQuery. Check caps lock is on/off using JavaScript: addEventListener() Method: This method adds an event handler to the document. Syntax: document.addEventListener(event, function, useCapture) Parameters: event: Th
6 min read
linux - How to detect if VT-X has been turned on in the BIOS?
While setting up virtual machines on Linux, sometimes we might face issues due to the absence of VT-X. VT-X, short for Intel's Virtualization Technology, is a hardware feature available on Intel processors that allows users to run multiple virtual machines or operating systems simultaneously. It's i
6 min read
How to detect Alt/Option + another key in textarea ?
In this article, we need to Detect Alt/Option + another key in textarea by using HTML and JavaScript. It detects both the keys i.e. Alt + h. The onkeydown Event occurs when someone presses a key (on the keyboard). Syntax: <textarea onkeydown="newScript" > Example: The below code illustrates to
1 min read
How To Detect and Remove a Keylogger?
You always hear about the latest high-tech security products, but the fact is that sometimes the simplest things can also help you stay safe. One such item is a simple keylogger detector. With this easy-to-use tool, you can quickly and easily detect if a keylogger has infected your computer. Keylogg
5 min read
How to create a Hotkey in Python?
This article is about How to create a HotKey Using Python. But first, let's discuss what is a Hotkey. A Hotkey is an assigned key or sequence of keys programmed to execute a command or perform a selected task during a software application: For instance, on Windows computers, the hotkey Ctrl+S is oft
3 min read
How to Turn Off Sticky Keys on Windows 10 and 11
If you're frustrated by the Sticky Keys feature popping up unexpectedly, you're not alone. Many users look for ways to turn off Sticky Keys on Windows 10 and 11 to avoid this accessibility feature from activating by mistake. This guide will walk you through how to disable Sticky Keys on Windows 11 a
7 min read
How to Enable the On-Screen Keyboard on Ubuntu
Ubuntu is a popular open sourced Linux distribution. It is a preferred choice for beginners as well as Technology enthusiasts. An on screen keyboard is a useful feature in Ubuntu in case there is any failure in the physical keyboard, or there is no physical keyboard attached. However, users can choo
6 min read
How to run the code on keypress event using jQuery ?
In this article, we will see how to run the code snippet on the keypress event using jQuery. The keypress event is triggered when the keyboard button is pressed by the user. Syntax: $(selector).keypress() In the below example, we are creating a textarea element and when the user starts pressing a ke
1 min read
How to convert first letter of a string to upper case using jQuery ?
The task is to capitalize the first letter of string without using toUpperCase() method with the help of jQuery. There are two approaches that are discussed below: Approach 1: In this example, the css() method is used to set the text-transform property value to capitalize. Example:html<!DOCTYPE H
2 min read
How to Enable or Disable Windows 11 Lock Screen Ads?
Lockscreen ads in Windows 11 can be an intriguing feature for some users, providing a glimpse of new content and apps. However, if you find these ads distracting or unnecessary, you can easily disable them. Whether you want to enable or disable these ads, this guide will walk you through the straigh
4 min read