June 18, 2020

How to Check if Caps Lock is On in Javascript

By Krishnaa JavaScript Questions 0 Comments

In this tutorial, you will learn how to check if caps lock is on in javascript. Caps lock is one of the commonly used keys in a computer keyboard. It is located on the left side in most of the computer keyboard layouts and when it is on, we can easily enter capital letters in any input field.

As a web developer, you may want to restrict certain input fields to only have lowercase or uppercase letters. A good example of this would be an input field where a user has to enter his or her username. By convention, a username should always be in lowercase letters.

Whenever we press a key on the keyboard, certain keyboard events are triggered and one of those events is the keyup event. In the event handler function, we receive an event object as an argument and it contains the getModifierState() method. We are going to use this method to detect the state of the caps lock.

In the following example, we will enter some text in the input field and while we are typing, we will check whether the caps lock is on or not. If it is on, we will show some text to the user. Please have a look over the code example and the steps given below.

HTML & CSS

We have 3 elements in the HTML file (div, input, and h1). The div element is just a wrapper for the rest of the elements.
By default, the h1 element has “Caps Lock is On” as innerText and it is hidden. We will change its visibility dynamically using javascript.
We have done some basic styling using CSS and added the link to our style.css stylesheet inside the head element.
We have also included our javascript file script.js with a script tag at the bottom.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    
    <div>
        <input type="text" placeholder="Enter Text">
        <h1>Caps Lock is On</h1>
    </div>

    <script src="script.js"></script>
</body>
</html>

body {
    text-align: center;
}

div {
    display: inline-block;
}

input {
    display: inline-block;
    padding: 10px 20px;
}

h1 {
    display: none;
}

Javascript

We have selected the input element and h1 element using the document.querySelector() method and stored them in the input and output variables respectively.
We have attached a keyup event listener to the input element.
In the event handler function, we are using the if statement and getModifierState() method of the event object to detect whether the caps lock is on or off. The method getModifierState() returns a Boolean value and depending upon the result of the check, we are changing the visibility of the h1 element using the display property.

let input = document.querySelector('input');
let output = document.querySelector('h1');

input.addEventListener('keyup', (event) => {

    if(event.getModifierState('CapsLock')){
        output.style.display = 'block';
    }else {
        output.style.display = 'none';
    }

});

You May Also Like: