How to check or detect whether the CAPS LOCK is turned on or off using JavaScript?
Tags: javascript
Published: 2021-06-22 00:00:00

---
  title: How to check or detect whether the CAPS LOCK is turned on or off using JavaScript?
  published: true
  tags: JavaScript
  date: Tue Jun 22 2021 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/check-detect-capslock-on-off-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-93d3673140008c015a3db6e856112c72.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/check-detect-capslock-on-off-javascript)
  
To check or detect whether the caps lock key is turned on or off, we can use the `getModifierState()` method on the input tag [`KeyBoardEvent`](https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent) and pass the string `CapsLock` to get the current state of the CapsLock key in JavaScript.

### TL;DR

```js
// get reference to the input tag
const myInput = document.getElementById("myInput");

// listen for a keydown event in the myInput
myInput.addEventListener("keydown", (event) => {
  // check if capslock is turned on or off
  // using the getModifierState() method
  const isCapsLockOn =
    event.getModifierState && event.getModifierState("CapsLock");

  console.log(isCapsLockOn); // true
});
```

To understand it better first let's make an HTML `input` and attach an `id` to reference it in JavaScript like this,

```html
<!-- HTML input tag -->
<input type="text" id="myInput" />
```

Now let's get a refernce to the `myInput` input in the JavaScript script using the `getElementById()` on the global `document` object like this,

```js
// get refernce to the input tag
const myInput = document.getElementById("myInput");
```

Now to use the `getModifierState()` method, we have to listen for a `KeyBoardEvent` like `keydown` or `keyup` on the input field. Let's listen for the `keydown` Keyboard Event in our case.

So let's attach an event listener on the `myInput` using the `addEventListener()` method. It can be done like this,

```js
// get refernce to the input tag
const myInput = document.getElementById("myInput");

// listen for a keydown event in the myInput
myInput.addEventListener("keydown", () => {
  // some cool stuff here!
});
```

Now that we have attached the listener for the `KeyBoardEvent`, whenever the user presses or enter something in the input field a `KeyBoardEvent` will be passed an argument to the function in the `addEventListener()` method, so here we can use the `getModifierState()` method on the event object and pass the string `CapsLock` to check whether the Caps Lock button is currently turned on or off.

- The `getModifierState()` method return a boolean value.

It can be done like this,

```js
// get refernce to the input tag
const myInput = document.getElementById("myInput");

// listen for a keydown event in the myInput
myInput.addEventListener("keydown", (event) => {
  // check if capslock is turned on or off
  const isCapsLockOn =
    event.getModifierState && event.getModifierState("CapsLock");

  console.log(isCapsLockOn); // true
});
```

Now you can see whether the caps lock is turned on or off when the user writes to the input tag.

That's all 😃!

See the above code live in [JSBin](https://jsbin.com/wosukejoqo/2/edit?html,js,console,output)

### Feel free to share if you found this useful 😃.

---