We can detect if the Caps Lock is On or Off with the help of getModifierState() method.

Implementing Caps Lock detection in JavaScript is surprisingly straightforward. The process revolves around using a built-in function and detect if Caps Lock is ON or OFF.

How it works? 🤔

In JavaScript, you can use a built-in function getModifierState() which returns true if a modifier is active otherwise false. It simply detect the event, for instance whether the Caps Lock is on or not.

Syntax 💻

getModifierState(keyArg)

keyArg is case-sensitive, make sure you pass argument as per the specification. If you want to see the list of values for keyArg, click here.

The getModifierState() function works with keyboard events and we will use the ‘key up’ event for Caps Lock detection.

All you have to do is, pass ‘CapsLock’ as an argument to this function like this: getModifierState(‘CapsLock’) and it will detect the state of Caps Lock key, whether it is ON or OFF.

Click on the password field and the focus is set on the password field, the above mentioned function will detect the state of Caps key. If the Caps key is On then it will display the message, “CAPS Lock is ON“.

Result 😍

When you open the index.html file in browser, you will see something like this:

See the Pen Detect if Caps Lock is On or Off by Learn Let’s Earn (@learnletsearn) on CodePen.

NOTE: It will detect CAPS Key only when the focus is on the Password field.

Try it out 👨‍💻

First of all, you have to create 3 files and keep them in same folder/directory. Name them as follows:

  1. HTML file: index.html
  2. CSS file: style.css
  3. JavaScript file: script.js

Code

HTML

Create a HTML file and give it a name “index.html”. Copy the below HTML structure in the file. 😎

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Check if Caps Lock is ON or OFF</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <section>
        <h1 class="heading">Login</h1>
        <form id="loginForm" class="form">
            <div class="username">
              <label for="username">Username</label>
              <input type="text" id="username" name="username">
            </div>
            <div class="password">
              <label for="password">Password</label>
              <input type="password" id="password" name="password">
              <span id="password-message" style="display: none">
                 CAPS Lock is ON
              </span>
            </div>
            <div class="button">
              <input type="submit" value="Login" class="btnSubmit">
            </div>
        </form>
    </section>
    <script src="./script.js"></script>
</body>
</html>

CSS

Create a CSS file and name it “style.css”. Copy the below CSS styles in the file. 😎

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    font-family: Arial, Helvetica, sans-serif;
    background: rgb(238,174,202);
    background: linear-gradient(45deg, rgba(238,174,202,1) 0%, rgba(148,187,233,1) 100%);
}

section {
    height: 55vh;
    width: 50vw;
    /* Glassmorphism Effect */
    background: rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    /* Grid */
    display: grid;
    grid-template-columns: 1fr 2fr 1fr;
    grid-template-rows: 1fr 35px 2fr 1fr 1fr;
}

.heading {
    grid-row: 2/3;
    grid-column: 2/3;
    font-size: 1.3em;
}

.form {
    grid-row: 3/5;
    grid-column: 2/3;
    display: grid;
}

.username {
  margin-top: 10px;
}

.btnSubmit {
    height: 2rem;
    width: 4rem;
}

label {
    margin-top: 5px;
    display: block;
    font-size: 0.9em;
}

input[type='text'], input[type='password'] {
    margin: 5px 0px;
    height: 30px;
    width: 100%;
}

#password-message { 
    color: #f4442e; 
    font-size: 0.8rem;
}

input[type='submit'] {
    margin: 10px 0px;
}

JavaScript

Finally, create a JavaScript file and name it “script.js”. Copy the below JS code in the file. 😎

const password = document.getElementById('password');
const passwordMsg = document.getElementById('password-message');

password.addEventListener('keyup', e => {
  passwordMsg.style = e.getModifierState('CapsLock') ? 'display: inline' : 'display: none';
});

For more JavaScript related posts, click here.

Categorized in:

JavaScript

Tagged in:

, , , , ,