capslockstate jQuery plugin 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>Click anywhere in <b>this frame</b> and start typing.</p>
<p class="r">The current state is: <span id="statetext"></span>.</p>
<p class="r"><span id="changetext"></span></p>

CSS

p {
  margin-top: 1em;
}
.r span {
  color: red;
  font-weight: bold;
}

JavaScript

$(document).ready(function() {

    /* 
    * Bind to capslockstate events and update display based on state 
    */
    $(window).bind("capsOn", function(event) {
        $("#statetext").html("on");
    });
    $(window).bind("capsOff", function(event) {
        $("#statetext").html("off");
    });
    $(window).bind("capsUnknown", function(event) {
        $("#statetext").html("unknown");
    });

    /*
    * Additional event notifying there has been a change, but not the state
    */
    $(window).bind("capsChanged", function(event) {
        $("#changetext").html("changed").show().fadeOut();
    });
    
    /* 
    * Initialize the capslockstate plugin.
    * Monitoring is happening at the window level.
    */
    $(window).capslockstate();

    // Call the "state" method to retreive the state at page load
    var initialState = $(window).capslockstate("state");
    $("#statetext").html(initialState);

});