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: 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.

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.

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.

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.

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.

Output:

• Before typing on the document:
  
• After typing on the document: