Detect caps lock on/off using jQuery [duplicate]

Question

How can I detect the Caps Lock key on/off using jQuery? I have a password textbox, and I allow only lowercase letters so I don't want the Caps Lock key to be on.

Is it possible to detect the state of Caps Lock key using jQuery?

Answer 1

How to detect Caps Lock with Javascript.

function capLock(e){   var kc = e.keyCode ? e.keyCode : e.which;   var sk = e.shiftKey ? e.shiftKey : kc === 16;   var visibility = ((kc >= 65 && kc <= 90) && !sk) ||        ((kc >= 97 && kc <= 122) && sk) ? 'visible' : 'hidden';   document.getElementById('divMayus').style.visibility = visibility } 

Then for your password form:

<input type="password" name="txtPassword" onkeypress="capLock(event)" /> <div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>  

Answer 2

There is a jQuery plugin called capslockstate that will monitor the state of the caps lock key over the entire page, not just in specific fields.

You can either query the state of the caps lock key or define event listeners to react to state changes.

The plugin does a better job of detection and state management than the other suggestions here, including working with non-English keyboards, monitoring the use of the Caps Lock key itself, and not forgetting the state if non alpha characters are typed.

There are two demos, one showing basic event binding and another showing the warning only when the password field has focus.

e.g.

$(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);  }); 

and

$(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();  }); 

The code for the plugin is viewable on GitHub.