Check Caps Lock Key Is ON/OFF In jQuery - Capslock State

A lightweight jQuery plugin that detects the state of the Caps Lock key and fires events based on the current on/off state. Useful for display a warning message when the user types into a password field with Caps Lock enabled.

Basic usage:

1. Load the JavaScript file jquery.capslockstate.js after jQuery library and we're ready to go.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="src/jquery.capslockstate.js"></script>

2. Initialize the capslockstate plugin to monitor the Caps Lock state at the window level.

$(window).capslockstate();

3. Bind to capslockstate events and update display based on state.

$(window).bind("capsOn", function(event) {
  if ($("#password:focus").length > 0) {
    $("#capsWarning").show();
  }
});

$(window).bind("capsOff capsUnknown", function(event) {
  $("#capsWarning").hide();
});

$("#password").bind("focusout", function(event) {
  $("#capsWarning").hide();
});

$("#password").bind("focusin", function(event) {
  if ($(window).capslockstate("state") === true) {
      $("#capsWarning").show();
  }
});

4. Additional event notifying there has been a change, but not the state

$(window).bind("capsChanged", function(event) {
  $("#changetext").html("changed").show().fadeOut();
});

---

This awesome jQuery plugin is developed by nosilleg. For more Advanced Usages, please check the demo page or visit the official website.