In this tutorial, you will learn to detect whether the CapsLock modifier key is pressed or not.
The getModifierState() method returns true if the specified modifier key was pressed, or activated.
Modifier keys that are activated only when they are being pressed down:
Modifier keys that are activated when they are clicked, and deactivated when they are clicked again:
Define a <p> element named Notify and a <input> element named test.
Add an event listener on the test element; you can use either the keyup event or the click event.
The getModifierState("CapsLock") method returns a boolean. If it is true, write “ !! CapsLock is activated. !! “.
Furthermore, if you want, you can use this particular method in jQuery.
var Notify = document.getElementById("Notify");
var Test = document.getElementById("test");
Notify.innerHTML = "!! Caps Lock is activated. !!";
Notify.style.color = "yellow";
Notify.innerHTML = "Caps Lock is deactivated.";
Notify.style.color = "green";