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.
html
<!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>
-
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.
html
<!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>
-
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.
html
<!DOCTYPE HTML>
<html>
<head>
<title>
Check caps lock is on or not
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</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>
-
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.
html
<!DOCTYPE HTML>
<html>
<head>
<title>
Check caps lock is on or not
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</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>
-
Before typing on the document:
-
After typing on the document:
Similar Reads
How to check lock-state of a callback list using jQuery ? In jQuery, a callback list is an object that stores a list of functions to be executed when a specific event occurs. These functions are called "callbacks". Callbacks are often used in jQuery to perform certain actions after an event has occurred. However, sometimes it may be necessary to check the
3 min read
How to make a key fire when key is pressed using JavaScript ? In JavaScript, holding down a key will fire the key continuously until it is released. This behavior may be used in applications such as games where a key may be expected to fire only once even after being held down. This can be achieved using two methods: Method 1: Using a flag variable to check th
3 min read
How to check if CSS property is supported in browser using JavaScript ? Few CSS properties are not supported in some browsers, thus it is required to check whether a CSS property & its value are supported in the current browser. We can find it using JavaScript using CSS.supports() method. Syntax: supports(propertyName, value) supports(condition) There are two distin
2 min read
How to Check if Enter Key is Pressed in Textbox JavaScript/jQuery ? Given a textarea element, the task is to check the user presses the enter key with the help of JQuery. jQuery keyup() MethodThis method triggers the keyup event or adds a function to run when a keyup event occurs. The keyup event occurs when a keyboard key is released. Syntax: Trigger the keyup even
2 min read
How to find out which Character Key is Pressed using JavaScript? To find which key is pressed in JavaScript, use event listeners like keydown, keypress, or keyup. By accessing properties such as event.key or event.code, it becomes easy to identify the specific key pressed. This approach is useful for handling user input and triggering actions based on key events.
2 min read