Detect Capslock In Javascript

Hello Developers, In this blog, we will learn how we can detect caps lock is turned on or off in javascript

Let’s get started

First of all, create a new HTML file then write the above code into your HTML file

<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <input type="text" id="myInput">
    <p id="text">Warning! Caps lock is ON.</p>

Paste the above code into your CSS file

input {
    padding: 10px;
    font-weight: 500;

#text {
    color: red;
    display: none;

Now paste the above code in your Javascript file

var input = document.getElementById("myInput");
var text = document.getElementById("text");
input.addEventListener("keyup", function (event) {
    if (event.getModifierState("CapsLock")) {     // This will return true if your caps-lock is on = "block";
    } else { = "none"


Submit a Comment

Your email address will not be published. Required fields are marked *


Select Categories