How to check caps lock is on/off using JavaScript / jQuery ?

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:
addEventListener() Method: This method adds an event handler to the document.Syntax:document.addEventListener(event, function, useCapture)
Parameters:event: This parameter is required. It specifies the string, the name of the event.function: This parameter is required. It specifies the function to run when the event occurs. When the event occurs, an event object is passed as the first parameter to the function. The type depends on the specified event. For example, the “click” event belongs to the MouseEvent object.useCapture: This parameter is optional. It specifies a boolean value which means whether the event should be executed in the capturing or in the bubbling phase.true: The event handler is executed in the capturing phase.false: The event handler is executed in the bubbling phase.
Syntax:
document.addEventListener(event, function, useCapture)

Parameters:
event: This parameter is required. It specifies the string, the name of the event.
function: This parameter is required. It specifies the function to run when the event occurs. When the event occurs, an event object is passed as the first parameter to the function. The type depends on the specified event. For example, the “click” event belongs to the MouseEvent object.
useCapture: This parameter is optional. It specifies a boolean value which means whether the event should be executed in the capturing or in the bubbling phase.true: The event handler is executed in the capturing phase.false: The event handler is executed in the bubbling phase.
true: The event handler is executed in the capturing phase.
false: The event handler is executed in the bubbling phase.
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.
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.
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.
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 ="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>                    
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 = "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>                    
Output:
Before typing on the document:
After typing on the document:
JavaScript-Misc
jQuery-Misc
JavaScript
JQuery
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Remove elements from a JavaScript Array
Difference Between PUT and PATCH Request
Roadmap to Learn JavaScript For Beginners
JavaScript | Promises
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to add options to a select element using jQuery?
How to fetch data from JSON file and display in HTML table using jQuery ?