In this article, you’ll learn how to check or detect whether the Caps Lock is turned on or off using javascript. To check if the caps lock is turned on, you use the getModifierState() method of the KeyboardEvent object:
const capslockIsOn = event.getModifierState(modifier);The getModifierState() method returns true if a modifier is active; otherwise, it will return false.
The event.getModifierState('CapsLock') can be used to detect if the caps lock is turned on or not.
Here is an example to check or detect whether the caps lock is turned on or off using javascript.
<!DOCTYPE html>
<html>
<head>
<title>
Check Caps Lock is Turned On or Off
</title>
<style>
#text {
display: none;
color: red;
}
</style>
</head>
<body style="text-align: center;">
<h1><span style="color: purple;">Tutorials</span>Rack</h1>
<h3>Detect Caps Lock</h3>
<p>Press the "Caps Lock" key inside the input field to trigger the function.</p>
<input id="myInput" value="Some text.." />
<p id="text">WARNING! Caps lock is ON.</p>
<script>
var input = document.getElementById("myInput");
var text = document.getElementById("text");
input.addEventListener("keyup", function (event) {
if (event.getModifierState("CapsLock")) {
text.style.display = "block";
} else {
text.style.display = "none";
}
});
</script>
</body>
</html>I hope this article will help you to understand how to check or detect whether the Caps Lock is turned on or off using javascript.
Share your valuable feedback, please post your comment at the bottom of this article. Thank you!
Comments