Caps Lock Alert for Password Input Fields

<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

  1. Robert M. Post author

    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

Leave a Reply

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