capslockstate jQuery plugin on input focus demonstration

by nosilleg

HTML

<script src="http://nosilleg.github.io/capslockstate-jquery-plugin/javascripts/jquery.capslockstate.js"></script>
<!-- 
Note jquery.capslockstate.js is in the External Resources section  
therefore there is no script tag for it here
-->

<p><a href="https://github.com/nosilleg/capslockstate-jquery-plugin">capslockstate jQuery plugin</a> monitors the state of the capslock key.</p>
<p>Caps lock warning will be shown only when password text input has focus.</p>
<div id="form">
  username
  <input type="text" />
  <br>
  password
  <input type="password" name="Passwd" id="Passwd" />
  <div id="capsWarning" style="display:none;">Caps Lock is on.</div>
</div>

CSS

p {
  margin-top: 1em;
}
#form {
  margin-top: 1em;
}

JavaScript

$(document).ready(function() {

    /* 
    * Bind to capslockstate events and update display based on state 
    */
    $(window).bind("capsOn", function(event) {
        if ($("#Passwd:focus").length > 0) {
            $("#capsWarning").show();
        }
    });
    $(window).bind("capsOff capsUnknown", function(event) {
        $("#capsWarning").hide();
    });
    $("#Passwd").bind("focusout", function(event) {
        $("#capsWarning").hide();
    });
    $("#Passwd").bind("focusin", function(event) {
        if ($(window).capslockstate("state") === true) {
            $("#capsWarning").show();
        }
    });

    /* 
    * Initialize the capslockstate plugin.
    * Monitoring is happening at the window level.
    */
    $(window).capslockstate();

});