How to check caps lock is on/off using JavaScript / jQuery ?
Last Updated :
29 May, 2019
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:
Example 1: This example adds a event listener to the document and when it happens it calls an anonymous function to handle this. Which checks if it CAPS LOCK or SHIFT key by using keyCode of the button.
<!DOCTYPE HTML>
<html>
<head>
<title>
Check caps lock is on or not
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var up = document.getElementById('GFG_UP');
up.innerHTML =
"Type anywhere on the page to check if CAPS LOCK is ON";
var down = document.getElementById('GFG_DOWN');
document.addEventListener('keypress', function(e) {
e = (e) ? e : window.event;
var charCode = false;
if (e.which) {
charCode = e.which;
}
else if (e.keyCode) {
charCode = e.keyCode;
}
var shifton = false;
if (e.shiftKey) {
shifton = e.shiftKey;
}
else if (e.modifiers) {
shifton = !!(e.modifiers & 4);
}
if (charCode >= 97 && charCode <= 122 && shifton) {
down.innerHTML = "Caps Lock is On";
return;
}
if (charCode >= 65 && charCode <= 90 && !shifton) {
down.innerHTML = "Caps Lock is On";
return;
}
down.innerHTML = "Caps Lock is Off";
return;
});
</script>
</body>
</html>
|
Output:
-
Before clicking on the document:
-
After clicking on the document:
Example 2: This example adds an event listener to the document and when it happens it checks for whether the CAPS LOCK is pressed or not.
<!DOCTYPE HTML>
<html>
<head>
<title>
Check caps lock is on or not
</title>
</head>
<body style = "text-align:center;">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
var up = document.getElementById('GFG_UP');
up.innerHTML = "Press the CAPS LOCK";
var down = document.getElementById('GFG_DOWN');
document.addEventListener("keyup", function(event) {
if (event.getModifierState("CapsLock")) {
down.innerHTML = "CAPS LOCK is On";
} else {
down.innerHTML = "CAPS LOCK is Off";
}
});
</script>
</body>
</html>
|
Output:
-
Before clicking on the document:
-
After clicking on the document:
Check caps lock is on/off using jQuery:
-
jQuery on() Method: This method adds one or more event handlers for the selected elements and child elements.
Syntax:
$(selector).on(event, childSelector, data, function, map)
Parameters:
- event: This parameter is required. It specifies one or more event(s) or namespaces to attach to the selected elements. In case of multiple event values, those are separated by space. Event must be a valid.
- childSelector: This parameter is optional. It specifies that the event handler should only be attached to the defined child elements.
- data: This parameter is optional. It specifies additional data to pass to the function.
- function: This parameter is required. It specifies the function to run when the event occurs.
- map: It specifies an event map ({event:func(), event:func(), …}) having one or more event to add to the selected elements, and functions to run when the events happens.
- JavaScript String toUpperCase() Method: This method converts a string to uppercase letters.
Syntax:
string.toUpperCase()
Return Value: It returns a string, representing the value of a string converted to uppercase.
- JavaScript String toLowerCase() Method: This method converts a string to lowercase letters.
Syntax:
string.toLowerCase()
Return Value: It returns a string, representing the value of a string converted to lowercase.
Example 1: This example adds a event listener to the body of document and when it occurs it calls an anonymous function to handle this. Which checks if it CAPS LOCK or SHIFT key by using toUpperCase(), toLowerCase() and shiftkey.
<!DOCTYPE HTML>
<html>
<head>
<title>
Check caps lock is on or not
</title>
<script src =
</script>
</head>
<body style = "text-align:center;" id = "body">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
$('#GFG_UP').
text("Type anywhere on the page to check if CAPS LOCK is ON");
$("#body").on('keypress', function(e) {
var s = String.fromCharCode( e.which );
if ((s.toUpperCase() === s && s.toLowerCase() !== s
&& !e.shiftKey) || (s.toUpperCase() !== s &&
s.toLowerCase() === s && e.shiftKey)) {
$('#GFG_DOWN').text("Caps Lock is ON");
}
else if ((s.toLowerCase() === s && s.toUpperCase() !== s
&& !e.shiftKey) || (s.toLowerCase() !== s
&& s.toUpperCase() === s && e.shiftKey)) {
$('#GFG_DOWN').text("Caps Lock is OFF");
}
});
</script>
</body>
</html>
|
Output:
-
Before typing on the document:
-
After typing on the document:
Example 2: This example does the same as of the previous example but by a different approach. Adds an event listener to the document and when it happens it checks for whether the CAPS LOCK is pressed or not.
<!DOCTYPE HTML>
<html>
<head>
<title>
Check caps lock is on or not
</title>
<script src =
</script>
</head>
<body style = "text-align:center;" id = "body">
<h1 style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG_UP" style =
"font-size: 15px; font-weight: bold;">
</p>
<p id = "GFG_DOWN" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
$('#GFG_UP').text("Turn On the Caps Lock and type on screen");
$('#body').on('keypress', function(e) {
var s = String.fromCharCode( e.which );
if ( (s.toUpperCase() === s && !e.shiftKey) ||
(s.toLowerCase() === s && e.shiftKey) ) {
alert('Caps Lock is on');
} else {
alert('Caps Lock is off');
}
});
</script>
</body>
</html>
|
Output:
-
Before typing on the document:
-
After typing on the document:
Share your thoughts in the comments
Please Login to comment...