Caps Lock Alert for Password Input Fields

2 Replies

<input type="password" id="password">
<span id="warning" style="display:none;color:#c00">[Caps Lock]</span>
<script>
document.getElementById("password").addEventListener("keyup", function(event) {
  document.getElementById("warning").style.display = (event.getModifierState("CapsLock")) ? "inline" : "none";
});
</script>

2 thoughts on “Caps Lock Alert for Password Input Fields”

Robert M. Post authorFebruary 23, 2022 at 8:10 pm

Forgot how much it annoys me when applications don’t show the same visual cue when you click or tab into the field…

<label for="password">Password</label>
<input type="password" id="password">
<span id="warning" style="display:none;color:#c00">[Caps Lock]</span>

<script>
function capsHandler(event) {
  document.getElementById("warning").style.display = event.getModifierState("CapsLock") ? "inline" : "none";
}
pw = document.getElementById("password");
pw.addEventListener("keyup", capsHandler, false);
pw.addEventListener("focus", capsHandler, false);
pw.addEventListener("click", capsHandler, false);
</script>

Demo: https://jsfiddle.net/j3k2ma16/

Reply ↓

Robert M. Post authorFebruary 23, 2022 at 8:46 pm
Shorthand way to cover all 3 events outlined above…
```
['keyup', 'focus', 'click'].forEach(e => pw.addEventListener(e, capsHandler, false));
```
Demo: https://jsfiddle.net/2yns13rq/2/
Reply ↓

Leave a Reply to Robert M. Cancel reply