How TO – Detect Caps Lock
Learn how to find out if capslock is on inside an input field with JavaScript.
Detect if Caps Lock is On
Try to press the “Caps Lock” key inside the input field:
Example
<!DOCTYPE html>
<html>
<style>
#text {display:none;color:red}
</style>
<body>
<h3>Detect Caps Lock</h3>
<p>Press the “Caps Lock” key inside the input field to trigger the function.</p>
<input id=”myInput” value=”Some text..”>
<p id=”text”>WARNING! Caps lock is ON.</p>
<script>
var input = document.getElementById(“myInput”);
var text = document.getElementById(“text”);
input.addEventListener(“keyup”, function(event) {
if (event.getModifierState(“CapsLock”)) {
text.style.display = “block”;
} else {
text.style.display = “none”
}
});
</script>
</body>
</html>