Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Detect caps lock on/off using jQuery [duplicate]

Tags:

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?

like image 584
ACP Avatar asked Feb 22 '10 04:02

ACP


People also ask

How do you check whether Caps Lock is on?

The getModifierState() method returns true if a modifier is active; otherwise, it returns false . The event. getModifierState('CapsLock') can be used to detect if the caps lock is on.

What is CAPS IN password?

Caps Lock ⇪ Caps Lock is a button on a computer keyboard that causes all letters of bicameral scripts to be generated in capital letters. It is a toggle key: each press reverses the previous action.


2 Answers

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>  
like image 52
twodayslate Avatar answered Sep 28 '22 05:09

twodayslate


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.

like image 28
nosilleg Avatar answered Sep 28 '22 05:09

nosilleg