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?
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.
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.
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>
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With