How do you tell if caps lock is on using JavaScript?
One caveat though: I did google it and the best solution I could find was to attach an onkeypress event to every input, then check each time if the letter pressed was uppercase, and if it was, then check if shift was also held down. If it wasn't, therefore caps lock must be on. This feels really dirty and just... wasteful - surely there's a better way than this?
This question is related to
javascript
keyboard
capslock
In this below code it will be show alert when Caps lock on and they press key using shift.
if we return false; then current char will not append to text page.
$('#password').keypress(function(e) {
// e.keyCode is not work in FF, SO, it will
// automatically get the value of e.which.
var s = String.fromCharCode( e.keyCode || e.which );
if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
alert('caps is on');
return false;
}
else if ( s.toUpperCase() !== s) {
alert('caps is on and Shiftkey pressed');
return false;
}
});
This jQuery-based answer posted by @user110902 was useful for me. However, I improved it a little to prevent a flaw mentioned in @B_N 's comment: it failed detecting CapsLock while you press Shift:
$('#example').keypress(function(e) {
var s = String.fromCharCode( e.which );
if (( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey )
|| ( s.toLowerCase() === s && s.toUpperCase() !== s && e.shiftKey )) {
alert('caps is on');
}
});
Like this, it will work even while pressing Shift.
try to use this code.
$('selectorOnTheInputTextBox').keypress(function (e) {
var charCode = e.target.value.charCodeAt(e.target.value.length - 1)
var capsOn =
e.keyCode &&
!e.shiftKey &&
!e.ctrlKey &&
charCode >= 65 &&
charCode <= 90;
if (capsOn)
//action if true
else
//action if false
});
Good Luck :)
it is late i know but, this can be helpfull someone else.
so here is my simpliest solution (with Turkish chars);
function (s,e)
{
var key = e.htmlEvent.key;
var upperCases = 'ABCÇDEFGGHIIJKLMNOÖPRSSTUÜVYZXWQ';
var lowerCases = 'abcçdefgghiijklmnoöprsstuüvyzxwq';
var digits = '0123456789';
if (upperCases.includes(key))
{
document.getElementById('spanLetterCase').innerText = '[A]';
}
else if (lowerCases.includes(key))
{
document.getElementById('spanLetterCase').innerText = '[a]';
}
else if (digits.includes(key))
{
document.getElementById('spanLetterCase').innerText = '[1]';
}
else
{
document.getElementById('spanLetterCase').innerText = '';
}
}
In jQuery:
$('some_element').keypress(function(e){
if(e.keyCode == 20){
//caps lock was pressed
}
});
This jQuery plugin (code) implements the same idea as in Rajesh's answer a bit more succinctly.
A variable that shows caps lock state:
let isCapsLockOn = false;
document.addEventListener( 'keydown', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
if(isCapsLockOn !== caps) isCapsLockOn = caps;
});
document.addEventListener( 'keyup', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
if(isCapsLockOn !== caps) isCapsLockOn = caps;
});
works on all browsers => canIUse
So I found this page and didn't really like the solutions I found so I figured one out and am offering it up to all of you. For me, it only matters if the caps lock is on if I'm typing letters. This code solved the problem for me. Its quick and easy and gives you a capsIsOn variable to reference whenever you need it.
let capsIsOn=false;_x000D_
let capsChecked=false;_x000D_
_x000D_
let capsCheck=(e)=>{_x000D_
let letter=e.key;_x000D_
if(letter.length===1 && letter.match(/[A-Za-z]/)){_x000D_
if(letter!==letter.toLowerCase()){_x000D_
capsIsOn=true;_x000D_
console.log('caps is on');_x000D_
}else{_x000D_
console.log('caps is off');_x000D_
}_x000D_
capsChecked=true;_x000D_
window.removeEventListener("keyup",capsCheck);_x000D_
}else{_x000D_
console.log("not a letter, not capsCheck was performed");_x000D_
}_x000D_
_x000D_
}_x000D_
_x000D_
window.addEventListener("keyup",capsCheck);_x000D_
_x000D_
window.addEventListener("keyup",(e)=>{_x000D_
if(capsChecked && e.keyCode===20){_x000D_
capsIsOn=!capsIsOn;_x000D_
}_x000D_
});Recently there was a similar question on hashcode.com, and I created a jQuery plugin to deal with it. It also supports the recognition of caps lock on numbers. (On the standard German keyboard layout caps lock has effect on numbers).
You can check the latest version here: jquery.capsChecker
We use getModifierState to check for caps lock, it's only a member of a mouse or keyboard event so we cannot use an onfocus. The most common two ways that the password field will gain focus is with a click in or a tab. We use onclick to check for a mouse click within the input, and we use onkeyup to detect a tab from the previous input field. If the password field is the only field on the page and is auto-focused then the event will not happen until the first key is released, which is ok but not ideal, you really want caps lock tool tips to display once the password field gains focus, but for most cases this solution works like a charm.
HTML
<input type="password" id="password" onclick="checkCapsLock(event)" onkeyup="checkCapsLock(event)" />
JS
function checkCapsLock(e) {
if (e.getModifierState("CapsLock")) {
console.log("Caps");
}
}
Based on answer of @joshuahedlund since it worked fine for me.
I made the code a function so it can be reused, and linked it to the body in my case. It can be linked to the password field only if you prefer.
<html>
<head>
<script language="javascript" type="text/javascript" >
function checkCapsLock(e, divId) {
if(e){
e = e;
} else {
e = window.event;
}
var s = String.fromCharCode( e.which );
if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)|| //caps is on
(s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
$(divId).style.display='block';
} else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
(s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
$(divId).style.display='none';
} //else upper and lower are both same (i.e. not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet)
}
</script>
<style>
.errorDiv {
display: none;
font-size: 12px;
color: red;
word-wrap: break-word;
text-overflow: clip;
max-width: 200px;
font-weight: normal;
}
</style>
</head>
<body onkeypress="checkCapsLock(event, 'CapsWarn');" >
...
<input name="password" id="password" type="password" autocomplete="off">
<div id="CapsWarn" class="errorDiv">Capslock is ON !</div>
...
</body>
</html>
When you type, if caplock is on, it could automatically convert the current char to lowercase. That way even if caplocks is on, it will not behave like it is on the current page. To inform your users you could display a text saying that caplocks is on, but that the form entries are converted.
This is a solution that, in addition to checking state when writing, also toggles the warning message each time the Caps Lock key is pressed (with some limitations).
It also supports non-english letters outside the A-Z range, as it checks the string character against toUpperCase() and toLowerCase() instead of checking against character range.
$(function(){_x000D_
//Initialize to hide caps-lock-warning_x000D_
$('.caps-lock-warning').hide();_x000D_
_x000D_
//Sniff for Caps-Lock state_x000D_
$("#password").keypress(function(e) {_x000D_
var s = String.fromCharCode( e.which );_x000D_
if((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)||_x000D_
(s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {_x000D_
this.caps = true; // Enables to do something on Caps-Lock keypress_x000D_
$(this).next('.caps-lock-warning').show();_x000D_
} else if((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||_x000D_
(s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) {_x000D_
this.caps = false; // Enables to do something on Caps-Lock keypress_x000D_
$(this).next('.caps-lock-warning').hide();_x000D_
}//else else do nothing if not a letter we can use to differentiate_x000D_
});_x000D_
_x000D_
//Toggle warning message on Caps-Lock toggle (with some limitation)_x000D_
$(document).keydown(function(e){_x000D_
if(e.which==20){ // Caps-Lock keypress_x000D_
var pass = document.getElementById("password");_x000D_
if(typeof(pass.caps) === 'boolean'){_x000D_
//State has been set to a known value by keypress_x000D_
pass.caps = !pass.caps;_x000D_
$(pass).next('.caps-lock-warning').toggle(pass.caps);_x000D_
}_x000D_
}_x000D_
});_x000D_
_x000D_
//Disable on window lost focus (because we loose track of state)_x000D_
$(window).blur(function(e){_x000D_
// If window is inactive, we have no control on the caps lock toggling_x000D_
// so better to re-set state_x000D_
var pass = document.getElementById("password");_x000D_
if(typeof(pass.caps) === 'boolean'){_x000D_
pass.caps = null;_x000D_
$(pass).next('.caps-lock-warning').hide();_x000D_
}_x000D_
});_x000D_
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<input type="password" id="password" />_x000D_
<span class="caps-lock-warning" title="Caps lock is on!">CAPS</span>Note that observing caps lock toggling is only useful if we know the state of the caps lock before the Caps Lock key is pressed. The current caps lock state is kept with a caps JavaScript property on the password element. This is set the first time we have a validation of the caps lock state when the user presses a letter that can be upper or lower case. If the window loses focus, we can no longer observe caps lock toggling, so we need to reset to an unknown state.
Recently there was a similar question on hashcode.com, and I created a jQuery plugin to deal with it. It also supports the recognition of caps lock on numbers. (On the standard German keyboard layout caps lock has effect on numbers).
You can check the latest version here: jquery.capsChecker
Yet another version, clear and simple, handles shifted capsLock, and not constrained to ascii I think:
document.onkeypress = function (e)
{
e = e || window.event;
if (e.charCode === 0 || e.ctrlKey || document.onkeypress.punctuation.indexOf(e.charCode) >= 0)
return;
var s = String.fromCharCode(e.charCode); // or e.keyCode for compatibility, but then have to handle MORE non-character keys
var s2 = e.shiftKey ? s.toUpperCase() : s.toLowerCase();
var capsLockOn = (s2 !== s);
document.getElementById('capslockWarning').style.display = capsLockOn ? '' : 'none';
}
document.onkeypress.punctuation = [33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,91,92,93,94,95,96,123,124,125,126];
Edit: Sense of capsLockOn was reversed, doh, fixed.
Edit #2: After checking this out some more, I've made a few changes, a bit more detailed code unfortunately, but it handles more actions appropriately.
Using e.charCode instead of e.keyCode and checking for 0 values skips a lot of non-character keypresses, without coding anything specific to a given language or charset. From my understanding, it's slightly less compatible, so older, non-mainstream, or mobile browsers may not behave as this code expects, but it's worth it, for my situation anyway.
Checking against a list of known punctuation codes prevents them from being seen as false negatives, since they're not affected by caps lock. Without this, the caps lock indicator gets hidden when you type any of those punctuation characters. By specifying an excluded set, rather than an included one, it should be more compatible with extended characters. This is the ugliest, special-casiest bit, and there's some chance that non-Western languages have different enough punctuation and/or punctuation codes to be a problem, but again it's worth it IMO, at least for my situation.
You can detect caps lock using "is letter uppercase and no shift pressed" using a keypress capture on the document. But then you better be sure that no other keypress handler pops the event bubble before it gets to the handler on the document.
document.onkeypress = function ( e ) {
e = e || window.event;
var s = String.fromCharCode( e.keyCode || e.which );
if ( (s.toUpperCase() === s) !== e.shiftKey ) {
// alert('caps is on')
}
}
You could grab the event during the capturing phase in browsers that support that, but it seems somewhat pointless to as it won't work on all browsers.
I can't think of any other way of actually detecting caps lock status. The check is simple anyway and if non detectable characters were typed, well... then detecting wasn't necessary.
There was an article on 24 ways on this last year. Quite good, but lacks international character support (use toUpperCase() to get around that).
In jQuery:
$('some_element').keypress(function(e){
if(e.keyCode == 20){
//caps lock was pressed
}
});
This jQuery plugin (code) implements the same idea as in Rajesh's answer a bit more succinctly.
Javascript Code
<script type="text/javascript">
function isCapLockOn(e){
kc = e.keyCode?e.keyCode:e.which;
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
document.getElementById('alert').style.visibility = 'visible';
else
document.getElementById('alert').style.visibility = 'hidden';
}
</script>
We now need to associate this script using Html
<input type="password" name="txtPassword" onkeypress="isCapLockOn(event)" />
<div id="alert" style="visibility:hidden">Caps Lock is on.</div>
This is a solution that, in addition to checking state when writing, also toggles the warning message each time the Caps Lock key is pressed (with some limitations).
It also supports non-english letters outside the A-Z range, as it checks the string character against toUpperCase() and toLowerCase() instead of checking against character range.
$(function(){_x000D_
//Initialize to hide caps-lock-warning_x000D_
$('.caps-lock-warning').hide();_x000D_
_x000D_
//Sniff for Caps-Lock state_x000D_
$("#password").keypress(function(e) {_x000D_
var s = String.fromCharCode( e.which );_x000D_
if((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)||_x000D_
(s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {_x000D_
this.caps = true; // Enables to do something on Caps-Lock keypress_x000D_
$(this).next('.caps-lock-warning').show();_x000D_
} else if((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||_x000D_
(s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) {_x000D_
this.caps = false; // Enables to do something on Caps-Lock keypress_x000D_
$(this).next('.caps-lock-warning').hide();_x000D_
}//else else do nothing if not a letter we can use to differentiate_x000D_
});_x000D_
_x000D_
//Toggle warning message on Caps-Lock toggle (with some limitation)_x000D_
$(document).keydown(function(e){_x000D_
if(e.which==20){ // Caps-Lock keypress_x000D_
var pass = document.getElementById("password");_x000D_
if(typeof(pass.caps) === 'boolean'){_x000D_
//State has been set to a known value by keypress_x000D_
pass.caps = !pass.caps;_x000D_
$(pass).next('.caps-lock-warning').toggle(pass.caps);_x000D_
}_x000D_
}_x000D_
});_x000D_
_x000D_
//Disable on window lost focus (because we loose track of state)_x000D_
$(window).blur(function(e){_x000D_
// If window is inactive, we have no control on the caps lock toggling_x000D_
// so better to re-set state_x000D_
var pass = document.getElementById("password");_x000D_
if(typeof(pass.caps) === 'boolean'){_x000D_
pass.caps = null;_x000D_
$(pass).next('.caps-lock-warning').hide();_x000D_
}_x000D_
});_x000D_
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
<input type="password" id="password" />_x000D_
<span class="caps-lock-warning" title="Caps lock is on!">CAPS</span>Note that observing caps lock toggling is only useful if we know the state of the caps lock before the Caps Lock key is pressed. The current caps lock state is kept with a caps JavaScript property on the password element. This is set the first time we have a validation of the caps lock state when the user presses a letter that can be upper or lower case. If the window loses focus, we can no longer observe caps lock toggling, so we need to reset to an unknown state.
We use getModifierState to check for caps lock, it's only a member of a mouse or keyboard event so we cannot use an onfocus. The most common two ways that the password field will gain focus is with a click in or a tab. We use onclick to check for a mouse click within the input, and we use onkeyup to detect a tab from the previous input field. If the password field is the only field on the page and is auto-focused then the event will not happen until the first key is released, which is ok but not ideal, you really want caps lock tool tips to display once the password field gains focus, but for most cases this solution works like a charm.
HTML
<input type="password" id="password" onclick="checkCapsLock(event)" onkeyup="checkCapsLock(event)" />
JS
function checkCapsLock(e) {
if (e.getModifierState("CapsLock")) {
console.log("Caps");
}
}
Here is a custom jquery plugin, using jquery ui, made up of all the good ideas on this page and leverages the tooltip widget. The caps lock message is auto applied all password boxes and requires no changes to your current html.
Custom plug in code...
(function ($) {
$.fn.capsLockAlert = function () {
return this.each(function () {
var capsLockOn = false;
var t = $(this);
var updateStatus = function () {
if (capsLockOn) {
t.tooltip('open');
} else {
t.tooltip('close');
}
}
t.tooltip({
items: "input",
position: { my: "left top", at: "left bottom+10" },
open: function (event, ui) {
ui.tooltip.css({ "min-width": "100px", "white-space": "nowrap" }).addClass('ui-state-error');
if (!capsLockOn) t.tooltip('close');
},
content: function () {
return $('<p style="white-space: nowrap;"/>')
.append($('<span class="ui-icon ui-icon-alert" style="display: inline-block; margin-right: 5px; vertical-align: text-top;" />'))
.append('Caps Lock On');
}
})
.off("mouseover mouseout")
.keydown(function (e) {
if (e.keyCode !== 20) return;
capsLockOn = !capsLockOn;
updateStatus();
})
.keypress(function (e) {
var kc = e.which; //get keycode
var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
if (!isUp && !isLow) return; //This isn't a character effected by caps lock
// event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
var isShift = (e.shiftKey) ? e.shiftKey : ((kc === 16) ? true : false); // shift is pressed
// uppercase w/out shift or lowercase with shift == caps lock
if ((isUp && !isShift) || (isLow && isShift)) {
capsLockOn = true;
} else {
capsLockOn = false;
}
updateStatus();
});
});
};
})(jQuery);
Apply to all password elements...
$(function () {
$(":password").capsLockAlert();
});
This jQuery-based answer posted by @user110902 was useful for me. However, I improved it a little to prevent a flaw mentioned in @B_N 's comment: it failed detecting CapsLock while you press Shift:
$('#example').keypress(function(e) {
var s = String.fromCharCode( e.which );
if (( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey )
|| ( s.toLowerCase() === s && s.toUpperCase() !== s && e.shiftKey )) {
alert('caps is on');
}
});
Like this, it will work even while pressing Shift.
This code detects caps lock no matter the case or if the shift key is pressed:
$('#password').keypress(function(e) {
var s = String.fromCharCode( e.which );
if ( (s.toUpperCase() === s && !e.shiftKey) ||
(s.toLowerCase() === s && e.shiftKey) ) {
alert('caps is on');
}
});
In JQuery. This covers the event handling in Firefox and will check for both unexpected uppercase and lowercase characters. This presupposes an <input id="password" type="password" name="whatever"/>element and a separate element with id 'capsLockWarning' that has the warning we want to show (but is hidden otherwise).
$('#password').keypress(function(e) {
e = e || window.event;
// An empty field resets the visibility.
if (this.value === '') {
$('#capsLockWarning').hide();
return;
}
// We need alphabetic characters to make a match.
var character = String.fromCharCode(e.keyCode || e.which);
if (character.toUpperCase() === character.toLowerCase()) {
return;
}
// SHIFT doesn't usually give us a lowercase character. Check for this
// and for when we get a lowercase character when SHIFT is enabled.
if ((e.shiftKey && character.toLowerCase() === character) ||
(!e.shiftKey && character.toUpperCase() === character)) {
$('#capsLockWarning').show();
} else {
$('#capsLockWarning').hide();
}
});
There is a much simpler solution for detecting caps-lock:
function isCapsLockOn(event) {
var s = String.fromCharCode(event.which);
if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
return true;
}
}
Many existing answers will check for caps lock on when shift is not pressed but will not check for it if you press shift and get lowercase, or will check for that but will not also check for caps lock being off, or will check for that but will consider non-alpha keys as 'off'. Here is an adapted jQuery solution that will show a warning if an alpha key is pressed with caps (shift or no shift), will turn off the warning if an alpha key is pressed without caps, but will not turn the warning off or on when numbers or other keys are pressed.
$("#password").keypress(function(e) {
var s = String.fromCharCode( e.which );
if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)|| //caps is on
(s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
$("#CapsWarn").show();
} else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
(s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
$("#CapsWarn").hide();
} //else upper and lower are both same (i.e. not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet)
});
In jQuery,
$('#example').keypress(function(e) {
var s = String.fromCharCode( e.which );
if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
alert('caps is on');
}
});
Avoid the mistake, like the backspace key, s.toLowerCase() !== s is needed.
The top answers here didn't work for me for a couple of reasons (un-commented code with a dead link and an incomplete solution). So I spent a few hours trying everyone's out and getting the best I could: here's mine, including jQuery and non-jQuery.
Note that jQuery normalizes the event object so some checks are missing. I've also narrowed it to all password fields (since that's the biggest reason to need it) and added a warning message. This has been tested in Chrome, Mozilla, Opera, and IE6-8. Stable and catches all capslock states EXCEPT when numbers or spaces are pressed.
/* check for CAPS LOCK on all password fields */
$("input[type='password']").keypress(function(e) {
var $warn = $(this).next(".capsWarn"); // handle the warning mssg
var kc = e.which; //get keycode
var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
// event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed
// uppercase w/out shift or lowercase with shift == caps lock
if ( (isUp && !isShift) || (isLow && isShift) ) {
$warn.show();
} else {
$warn.hide();
}
}).after("<span class='capsWarn error' style='display:none;'>Is your CAPSLOCK on?</span>");
Some of the other jQuery-less solutions lacked IE fallbacks. @Zappa patched it.
document.onkeypress = function ( e ) {
e = (e) ? e : window.event;
var kc = ( e.keyCode ) ? e.keyCode : e.which; // get keycode
var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed -- works for IE8-
// uppercase w/out shift or lowercase with shift == caps lock
if ( (isUp && !isShift) || (isLow && isShift) ) {
alert("CAPSLOCK is on."); // do your thing here
} else {
// no CAPSLOCK to speak of
}
}
Note: Check out the solutions of @Borgar, @Joe Liversedge, and @Zappa, and the plugin developed by @Pavel Azanov, which I have not tried but is a good idea. If someone knows a way to expand the scope beyond A-Za-z, please edit away. Also, jQuery versions of this question are closed as duplicate, so that's why I'm posting both here.
In jQuery:
$('some_element').keypress(function(e){
if(e.keyCode == 20){
//caps lock was pressed
}
});
This jQuery plugin (code) implements the same idea as in Rajesh's answer a bit more succinctly.
In jQuery,
$('#example').keypress(function(e) {
var s = String.fromCharCode( e.which );
if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
alert('caps is on');
}
});
Avoid the mistake, like the backspace key, s.toLowerCase() !== s is needed.
So I found this page and didn't really like the solutions I found so I figured one out and am offering it up to all of you. For me, it only matters if the caps lock is on if I'm typing letters. This code solved the problem for me. Its quick and easy and gives you a capsIsOn variable to reference whenever you need it.
let capsIsOn=false;_x000D_
let capsChecked=false;_x000D_
_x000D_
let capsCheck=(e)=>{_x000D_
let letter=e.key;_x000D_
if(letter.length===1 && letter.match(/[A-Za-z]/)){_x000D_
if(letter!==letter.toLowerCase()){_x000D_
capsIsOn=true;_x000D_
console.log('caps is on');_x000D_
}else{_x000D_
console.log('caps is off');_x000D_
}_x000D_
capsChecked=true;_x000D_
window.removeEventListener("keyup",capsCheck);_x000D_
}else{_x000D_
console.log("not a letter, not capsCheck was performed");_x000D_
}_x000D_
_x000D_
}_x000D_
_x000D_
window.addEventListener("keyup",capsCheck);_x000D_
_x000D_
window.addEventListener("keyup",(e)=>{_x000D_
if(capsChecked && e.keyCode===20){_x000D_
capsIsOn=!capsIsOn;_x000D_
}_x000D_
});Here is a custom jquery plugin, using jquery ui, made up of all the good ideas on this page and leverages the tooltip widget. The caps lock message is auto applied all password boxes and requires no changes to your current html.
Custom plug in code...
(function ($) {
$.fn.capsLockAlert = function () {
return this.each(function () {
var capsLockOn = false;
var t = $(this);
var updateStatus = function () {
if (capsLockOn) {
t.tooltip('open');
} else {
t.tooltip('close');
}
}
t.tooltip({
items: "input",
position: { my: "left top", at: "left bottom+10" },
open: function (event, ui) {
ui.tooltip.css({ "min-width": "100px", "white-space": "nowrap" }).addClass('ui-state-error');
if (!capsLockOn) t.tooltip('close');
},
content: function () {
return $('<p style="white-space: nowrap;"/>')
.append($('<span class="ui-icon ui-icon-alert" style="display: inline-block; margin-right: 5px; vertical-align: text-top;" />'))
.append('Caps Lock On');
}
})
.off("mouseover mouseout")
.keydown(function (e) {
if (e.keyCode !== 20) return;
capsLockOn = !capsLockOn;
updateStatus();
})
.keypress(function (e) {
var kc = e.which; //get keycode
var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
if (!isUp && !isLow) return; //This isn't a character effected by caps lock
// event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
var isShift = (e.shiftKey) ? e.shiftKey : ((kc === 16) ? true : false); // shift is pressed
// uppercase w/out shift or lowercase with shift == caps lock
if ((isUp && !isShift) || (isLow && isShift)) {
capsLockOn = true;
} else {
capsLockOn = false;
}
updateStatus();
});
});
};
})(jQuery);
Apply to all password elements...
$(function () {
$(":password").capsLockAlert();
});
try to use this code.
$('selectorOnTheInputTextBox').keypress(function (e) {
var charCode = e.target.value.charCodeAt(e.target.value.length - 1)
var capsOn =
e.keyCode &&
!e.shiftKey &&
!e.ctrlKey &&
charCode >= 65 &&
charCode <= 90;
if (capsOn)
//action if true
else
//action if false
});
Good Luck :)
In JQuery. This covers the event handling in Firefox and will check for both unexpected uppercase and lowercase characters. This presupposes an <input id="password" type="password" name="whatever"/>element and a separate element with id 'capsLockWarning' that has the warning we want to show (but is hidden otherwise).
$('#password').keypress(function(e) {
e = e || window.event;
// An empty field resets the visibility.
if (this.value === '') {
$('#capsLockWarning').hide();
return;
}
// We need alphabetic characters to make a match.
var character = String.fromCharCode(e.keyCode || e.which);
if (character.toUpperCase() === character.toLowerCase()) {
return;
}
// SHIFT doesn't usually give us a lowercase character. Check for this
// and for when we get a lowercase character when SHIFT is enabled.
if ((e.shiftKey && character.toLowerCase() === character) ||
(!e.shiftKey && character.toUpperCase() === character)) {
$('#capsLockWarning').show();
} else {
$('#capsLockWarning').hide();
}
});
You can detect caps lock using "is letter uppercase and no shift pressed" using a keypress capture on the document. But then you better be sure that no other keypress handler pops the event bubble before it gets to the handler on the document.
document.onkeypress = function ( e ) {
e = e || window.event;
var s = String.fromCharCode( e.keyCode || e.which );
if ( (s.toUpperCase() === s) !== e.shiftKey ) {
// alert('caps is on')
}
}
You could grab the event during the capturing phase in browsers that support that, but it seems somewhat pointless to as it won't work on all browsers.
I can't think of any other way of actually detecting caps lock status. The check is simple anyway and if non detectable characters were typed, well... then detecting wasn't necessary.
There was an article on 24 ways on this last year. Quite good, but lacks international character support (use toUpperCase() to get around that).
In jQuery:
$('some_element').keypress(function(e){
if(e.keyCode == 20){
//caps lock was pressed
}
});
This jQuery plugin (code) implements the same idea as in Rajesh's answer a bit more succinctly.
You can use a KeyboardEvent to detect numerous keys including the caps lock on most recent browsers.
The getModifierState function will provide the state for:
This demo works in all major browsers including mobile (caniuse).
passwordField.addEventListener( 'keydown', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
console.log( caps ); // true when you press the keyboard CapsLock key
});
React
onKeyPress(event) {
let self = this;
self.setState({
capsLock: isCapsLockOn(self, event)
});
}
onKeyUp(event) {
let self = this;
let key = event.key;
if( key === 'Shift') {
self.shift = false;
}
}
<div>
<input name={this.props.name} onKeyDown={(e)=>this.onKeyPress(e)} onKeyUp={(e)=>this.onKeyUp(e)} onChange={this.props.onChange}/>
{this.capsLockAlert()}
</div>
function isCapsLockOn(component, event) {
let key = event.key;
let keyCode = event.keyCode;
component.lastKeyPressed = key;
if( key === 'Shift') {
component.shift = true;
}
if (key === 'CapsLock') {
let newCapsLockState = !component.state.capsLock;
component.caps = newCapsLockState;
return newCapsLockState;
} else {
if ((component.lastKeyPressed !== 'Shift' && (key === key.toUpperCase() && (keyCode >= 65 && keyCode <= 90)) && !component.shift) || component.caps ) {
component.caps = true;
return true;
} else {
component.caps = false;
return false;
}
}
}
You can detect caps lock using "is letter uppercase and no shift pressed" using a keypress capture on the document. But then you better be sure that no other keypress handler pops the event bubble before it gets to the handler on the document.
document.onkeypress = function ( e ) {
e = e || window.event;
var s = String.fromCharCode( e.keyCode || e.which );
if ( (s.toUpperCase() === s) !== e.shiftKey ) {
// alert('caps is on')
}
}
You could grab the event during the capturing phase in browsers that support that, but it seems somewhat pointless to as it won't work on all browsers.
I can't think of any other way of actually detecting caps lock status. The check is simple anyway and if non detectable characters were typed, well... then detecting wasn't necessary.
There was an article on 24 ways on this last year. Quite good, but lacks international character support (use toUpperCase() to get around that).
Yet another version, clear and simple, handles shifted capsLock, and not constrained to ascii I think:
document.onkeypress = function (e)
{
e = e || window.event;
if (e.charCode === 0 || e.ctrlKey || document.onkeypress.punctuation.indexOf(e.charCode) >= 0)
return;
var s = String.fromCharCode(e.charCode); // or e.keyCode for compatibility, but then have to handle MORE non-character keys
var s2 = e.shiftKey ? s.toUpperCase() : s.toLowerCase();
var capsLockOn = (s2 !== s);
document.getElementById('capslockWarning').style.display = capsLockOn ? '' : 'none';
}
document.onkeypress.punctuation = [33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,91,92,93,94,95,96,123,124,125,126];
Edit: Sense of capsLockOn was reversed, doh, fixed.
Edit #2: After checking this out some more, I've made a few changes, a bit more detailed code unfortunately, but it handles more actions appropriately.
Using e.charCode instead of e.keyCode and checking for 0 values skips a lot of non-character keypresses, without coding anything specific to a given language or charset. From my understanding, it's slightly less compatible, so older, non-mainstream, or mobile browsers may not behave as this code expects, but it's worth it, for my situation anyway.
Checking against a list of known punctuation codes prevents them from being seen as false negatives, since they're not affected by caps lock. Without this, the caps lock indicator gets hidden when you type any of those punctuation characters. By specifying an excluded set, rather than an included one, it should be more compatible with extended characters. This is the ugliest, special-casiest bit, and there's some chance that non-Western languages have different enough punctuation and/or punctuation codes to be a problem, but again it's worth it IMO, at least for my situation.
In this below code it will be show alert when Caps lock on and they press key using shift.
if we return false; then current char will not append to text page.
$('#password').keypress(function(e) {
// e.keyCode is not work in FF, SO, it will
// automatically get the value of e.which.
var s = String.fromCharCode( e.keyCode || e.which );
if ( s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey ) {
alert('caps is on');
return false;
}
else if ( s.toUpperCase() !== s) {
alert('caps is on and Shiftkey pressed');
return false;
}
});
When you type, if caplock is on, it could automatically convert the current char to lowercase. That way even if caplocks is on, it will not behave like it is on the current page. To inform your users you could display a text saying that caplocks is on, but that the form entries are converted.
React
onKeyPress(event) {
let self = this;
self.setState({
capsLock: isCapsLockOn(self, event)
});
}
onKeyUp(event) {
let self = this;
let key = event.key;
if( key === 'Shift') {
self.shift = false;
}
}
<div>
<input name={this.props.name} onKeyDown={(e)=>this.onKeyPress(e)} onKeyUp={(e)=>this.onKeyUp(e)} onChange={this.props.onChange}/>
{this.capsLockAlert()}
</div>
function isCapsLockOn(component, event) {
let key = event.key;
let keyCode = event.keyCode;
component.lastKeyPressed = key;
if( key === 'Shift') {
component.shift = true;
}
if (key === 'CapsLock') {
let newCapsLockState = !component.state.capsLock;
component.caps = newCapsLockState;
return newCapsLockState;
} else {
if ((component.lastKeyPressed !== 'Shift' && (key === key.toUpperCase() && (keyCode >= 65 && keyCode <= 90)) && !component.shift) || component.caps ) {
component.caps = true;
return true;
} else {
component.caps = false;
return false;
}
}
}
I know this is an old topic but thought I would feed back in case it helps others. None of the answers to the question seem to work in IE8. I did however find this code that works in IE8. (Havent tested anything below IE8 yet). This can be easily modified for jQuery if required.
function capsCheck(e,obj){
kc = e.keyCode?e.keyCode:e.which;
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk)){
document.getElementById('#'+obj.id).style.visibility = 'visible';
}
else document.getElementById('#'+obj.id).style.visibility = 'hidden';
}
And the function is called through the onkeypress event like this:
<input type="password" name="txtPassword" onkeypress="capsCheck(event,this);" />
<div id="capsWarningDiv" style="visibility:hidden">Caps Lock is on.</div>
You could use this script. It should work well on Windows even if the Shift key is pressed but it won't work on Mac OS if so.
For jQuery with twitter bootstrap
Check caps locked for the following characters:
uppercase A-Z or 'Ä', 'Ö', 'Ü', '!', '"', '§', '$', '%', '&', '/', '(', ')', '=', ':', ';', '*', '''
lowercase a-Z or 0-9 or 'ä', 'ö', 'ü', '.', ',', '+', '#'
/* check for CAPS LOCK on all password fields */
$("input[type='password']").keypress(function(e) {
var kc = e.which; // get keycode
var isUpperCase = ((kc >= 65 && kc <= 90) || (kc >= 33 && kc <= 34) || (kc >= 36 && kc <= 39) || (kc >= 40 && kc <= 42) || kc == 47 || (kc >= 58 && kc <= 59) || kc == 61 || kc == 63 || kc == 167 || kc == 196 || kc == 214 || kc == 220) ? true : false; // uppercase A-Z or 'Ä', 'Ö', 'Ü', '!', '"', '§', '$', '%', '&', '/', '(', ')', '=', ':', ';'
var isLowerCase = ((kc >= 97 && kc <= 122) || (kc >= 48 && kc <= 57) || kc == 35 || (kc >= 43 && kc <= 44) || kc == 46 || kc == 228 || kc == 223 || kc == 246 || kc == 252) ? true : false; // lowercase a-Z or 0-9 or 'ä', 'ö', 'ü', '.', ','
// event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
var isShift = (e.shiftKey) ? e.shiftKey : ((kc == 16) ? true : false); // shift is pressed
// uppercase w/out shift or lowercase with shift == caps lock
if ((isUpperCase && !isShift) || (isLowerCase && isShift)) {
$(this).next('.form-control-feedback').show().parent().addClass('has-warning has-feedback').next(".capsWarn").show();
} else {
$(this).next('.form-control-feedback').hide().parent().removeClass('has-warning has-feedback').next(".capsWarn").hide();
}
}).after('<span class="glyphicon glyphicon-warning-sign form-control-feedback" style="display:none;"></span>').parent().after("<span class='capsWarn text-danger' style='display:none;'>Is your CAPSLOCK on?</span>");
Mottie's and Diego Vieira's response above is what we ended up using and should be the accepted answer now. However, before I noticed it, I wrote this little javascript function that doesn't rely on character codes...
var capsLockIsOnKeyDown = {shiftWasDownDuringLastChar: false,
capsLockIsOnKeyDown: function(event) {
var eventWasShiftKeyDown = event.which === 16;
var capsLockIsOn = false;
var shifton = false;
if (event.shiftKey) {
shifton = event.shiftKey;
} else if (event.modifiers) {
shifton = !!(event.modifiers & 4);
}
if (event.target.value.length > 0 && !eventWasShiftKeyDown) {
var lastChar = event.target.value[event.target.value.length-1];
var isAlpha = /^[a-zA-Z]/.test(lastChar);
if (isAlpha) {
if (lastChar.toUpperCase() === lastChar && lastChar.toLowerCase() !== lastChar
&& !event.shiftKey && !capsLockIsOnKeyDown.shiftWasDownDuringLastChar) {
capsLockIsOn = true;
}
}
}
capsLockIsOnKeyDown.shiftWasDownDuringLastChar = shifton;
return capsLockIsOn;
}
}
Then call it in an event handler like so capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)
But again, we ended up just using @Mottie s and @Diego Vieira s response
Many existing answers will check for caps lock on when shift is not pressed but will not check for it if you press shift and get lowercase, or will check for that but will not also check for caps lock being off, or will check for that but will consider non-alpha keys as 'off'. Here is an adapted jQuery solution that will show a warning if an alpha key is pressed with caps (shift or no shift), will turn off the warning if an alpha key is pressed without caps, but will not turn the warning off or on when numbers or other keys are pressed.
$("#password").keypress(function(e) {
var s = String.fromCharCode( e.which );
if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)|| //caps is on
(s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
$("#CapsWarn").show();
} else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
(s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
$("#CapsWarn").hide();
} //else upper and lower are both same (i.e. not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet)
});
try this out simple code in easy to understand
This is the Script
<script language="Javascript">
function capLock(e){
kc = e.keyCode?e.keyCode:e.which;
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
document.getElementById('divMayus').style.visibility = 'visible';
else
document.getElementById('divMayus').style.visibility = 'hidden';
}
</script>
And the Html
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
I wrote a library called capsLock which does exactly what you want it to do.
Just include it on your web pages:
<script src="https://rawgit.com/aaditmshah/capsLock/master/capsLock.js"></script>
Then use it as follows:
alert(capsLock.status);
capsLock.observe(function (status) {
alert(status);
});
See the demo: http://jsfiddle.net/3EXMd/
The status is updated when you press the Caps Lock key. It only uses the Shift key hack to determine the correct status of the Caps Lock key. Initially the status is false. So beware.
I know this is an old topic but thought I would feed back in case it helps others. None of the answers to the question seem to work in IE8. I did however find this code that works in IE8. (Havent tested anything below IE8 yet). This can be easily modified for jQuery if required.
function capsCheck(e,obj){
kc = e.keyCode?e.keyCode:e.which;
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk)){
document.getElementById('#'+obj.id).style.visibility = 'visible';
}
else document.getElementById('#'+obj.id).style.visibility = 'hidden';
}
And the function is called through the onkeypress event like this:
<input type="password" name="txtPassword" onkeypress="capsCheck(event,this);" />
<div id="capsWarningDiv" style="visibility:hidden">Caps Lock is on.</div>
Mottie's and Diego Vieira's response above is what we ended up using and should be the accepted answer now. However, before I noticed it, I wrote this little javascript function that doesn't rely on character codes...
var capsLockIsOnKeyDown = {shiftWasDownDuringLastChar: false,
capsLockIsOnKeyDown: function(event) {
var eventWasShiftKeyDown = event.which === 16;
var capsLockIsOn = false;
var shifton = false;
if (event.shiftKey) {
shifton = event.shiftKey;
} else if (event.modifiers) {
shifton = !!(event.modifiers & 4);
}
if (event.target.value.length > 0 && !eventWasShiftKeyDown) {
var lastChar = event.target.value[event.target.value.length-1];
var isAlpha = /^[a-zA-Z]/.test(lastChar);
if (isAlpha) {
if (lastChar.toUpperCase() === lastChar && lastChar.toLowerCase() !== lastChar
&& !event.shiftKey && !capsLockIsOnKeyDown.shiftWasDownDuringLastChar) {
capsLockIsOn = true;
}
}
}
capsLockIsOnKeyDown.shiftWasDownDuringLastChar = shifton;
return capsLockIsOn;
}
}
Then call it in an event handler like so capsLockIsOnKeyDown.capsLockIsOnKeyDown(event)
But again, we ended up just using @Mottie s and @Diego Vieira s response
You can detect caps lock using "is letter uppercase and no shift pressed" using a keypress capture on the document. But then you better be sure that no other keypress handler pops the event bubble before it gets to the handler on the document.
document.onkeypress = function ( e ) {
e = e || window.event;
var s = String.fromCharCode( e.keyCode || e.which );
if ( (s.toUpperCase() === s) !== e.shiftKey ) {
// alert('caps is on')
}
}
You could grab the event during the capturing phase in browsers that support that, but it seems somewhat pointless to as it won't work on all browsers.
I can't think of any other way of actually detecting caps lock status. The check is simple anyway and if non detectable characters were typed, well... then detecting wasn't necessary.
There was an article on 24 ways on this last year. Quite good, but lacks international character support (use toUpperCase() to get around that).
This code detects caps lock no matter the case or if the shift key is pressed:
$('#password').keypress(function(e) {
var s = String.fromCharCode( e.which );
if ( (s.toUpperCase() === s && !e.shiftKey) ||
(s.toLowerCase() === s && e.shiftKey) ) {
alert('caps is on');
}
});
Based on answer of @joshuahedlund since it worked fine for me.
I made the code a function so it can be reused, and linked it to the body in my case. It can be linked to the password field only if you prefer.
<html>
<head>
<script language="javascript" type="text/javascript" >
function checkCapsLock(e, divId) {
if(e){
e = e;
} else {
e = window.event;
}
var s = String.fromCharCode( e.which );
if ((s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey)|| //caps is on
(s.toUpperCase() !== s && s.toLowerCase() === s && e.shiftKey)) {
$(divId).style.display='block';
} else if ((s.toLowerCase() === s && s.toUpperCase() !== s && !e.shiftKey)||
(s.toLowerCase() !== s && s.toUpperCase() === s && e.shiftKey)) { //caps is off
$(divId).style.display='none';
} //else upper and lower are both same (i.e. not alpha key - so do not hide message if already on but do not turn on if alpha keys not hit yet)
}
</script>
<style>
.errorDiv {
display: none;
font-size: 12px;
color: red;
word-wrap: break-word;
text-overflow: clip;
max-width: 200px;
font-weight: normal;
}
</style>
</head>
<body onkeypress="checkCapsLock(event, 'CapsWarn');" >
...
<input name="password" id="password" type="password" autocomplete="off">
<div id="CapsWarn" class="errorDiv">Capslock is ON !</div>
...
</body>
</html>
I wrote a library called capsLock which does exactly what you want it to do.
Just include it on your web pages:
<script src="https://rawgit.com/aaditmshah/capsLock/master/capsLock.js"></script>
Then use it as follows:
alert(capsLock.status);
capsLock.observe(function (status) {
alert(status);
});
See the demo: http://jsfiddle.net/3EXMd/
The status is updated when you press the Caps Lock key. It only uses the Shift key hack to determine the correct status of the Caps Lock key. Initially the status is false. So beware.
it is late i know but, this can be helpfull someone else.
so here is my simpliest solution (with Turkish chars);
function (s,e)
{
var key = e.htmlEvent.key;
var upperCases = 'ABCÇDEFGGHIIJKLMNOÖPRSSTUÜVYZXWQ';
var lowerCases = 'abcçdefgghiijklmnoöprsstuüvyzxwq';
var digits = '0123456789';
if (upperCases.includes(key))
{
document.getElementById('spanLetterCase').innerText = '[A]';
}
else if (lowerCases.includes(key))
{
document.getElementById('spanLetterCase').innerText = '[a]';
}
else if (digits.includes(key))
{
document.getElementById('spanLetterCase').innerText = '[1]';
}
else
{
document.getElementById('spanLetterCase').innerText = '';
}
}
A variable that shows caps lock state:
let isCapsLockOn = false;
document.addEventListener( 'keydown', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
if(isCapsLockOn !== caps) isCapsLockOn = caps;
});
document.addEventListener( 'keyup', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
if(isCapsLockOn !== caps) isCapsLockOn = caps;
});
works on all browsers => canIUse
You could use this script. It should work well on Windows even if the Shift key is pressed but it won't work on Mac OS if so.
try this out simple code in easy to understand
This is the Script
<script language="Javascript">
function capLock(e){
kc = e.keyCode?e.keyCode:e.which;
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
document.getElementById('divMayus').style.visibility = 'visible';
else
document.getElementById('divMayus').style.visibility = 'hidden';
}
</script>
And the Html
<input type="password" name="txtPassword" onkeypress="capLock(event)" />
<div id="divMayus" style="visibility:hidden">Caps Lock is on.</div>
There is a much simpler solution for detecting caps-lock:
function isCapsLockOn(event) {
var s = String.fromCharCode(event.which);
if (s.toUpperCase() === s && s.toLowerCase() !== s && !event.shiftKey) {
return true;
}
}
You can use a KeyboardEvent to detect numerous keys including the caps lock on most recent browsers.
The getModifierState function will provide the state for:
This demo works in all major browsers including mobile (caniuse).
passwordField.addEventListener( 'keydown', function( event ) {
var caps = event.getModifierState && event.getModifierState( 'CapsLock' );
console.log( caps ); // true when you press the keyboard CapsLock key
});
The top answers here didn't work for me for a couple of reasons (un-commented code with a dead link and an incomplete solution). So I spent a few hours trying everyone's out and getting the best I could: here's mine, including jQuery and non-jQuery.
Note that jQuery normalizes the event object so some checks are missing. I've also narrowed it to all password fields (since that's the biggest reason to need it) and added a warning message. This has been tested in Chrome, Mozilla, Opera, and IE6-8. Stable and catches all capslock states EXCEPT when numbers or spaces are pressed.
/* check for CAPS LOCK on all password fields */
$("input[type='password']").keypress(function(e) {
var $warn = $(this).next(".capsWarn"); // handle the warning mssg
var kc = e.which; //get keycode
var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
// event.shiftKey does not seem to be normalized by jQuery(?) for IE8-
var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed
// uppercase w/out shift or lowercase with shift == caps lock
if ( (isUp && !isShift) || (isLow && isShift) ) {
$warn.show();
} else {
$warn.hide();
}
}).after("<span class='capsWarn error' style='display:none;'>Is your CAPSLOCK on?</span>");
Some of the other jQuery-less solutions lacked IE fallbacks. @Zappa patched it.
document.onkeypress = function ( e ) {
e = (e) ? e : window.event;
var kc = ( e.keyCode ) ? e.keyCode : e.which; // get keycode
var isUp = (kc >= 65 && kc <= 90) ? true : false; // uppercase
var isLow = (kc >= 97 && kc <= 122) ? true : false; // lowercase
var isShift = ( e.shiftKey ) ? e.shiftKey : ( (kc == 16) ? true : false ); // shift is pressed -- works for IE8-
// uppercase w/out shift or lowercase with shift == caps lock
if ( (isUp && !isShift) || (isLow && isShift) ) {
alert("CAPSLOCK is on."); // do your thing here
} else {
// no CAPSLOCK to speak of
}
}
Note: Check out the solutions of @Borgar, @Joe Liversedge, and @Zappa, and the plugin developed by @Pavel Azanov, which I have not tried but is a good idea. If someone knows a way to expand the scope beyond A-Za-z, please edit away. Also, jQuery versions of this question are closed as duplicate, so that's why I'm posting both here.
Javascript Code
<script type="text/javascript">
function isCapLockOn(e){
kc = e.keyCode?e.keyCode:e.which;
sk = e.shiftKey?e.shiftKey:((kc == 16)?true:false);
if(((kc >= 65 && kc <= 90) && !sk)||((kc >= 97 && kc <= 122) && sk))
document.getElementById('alert').style.visibility = 'visible';
else
document.getElementById('alert').style.visibility = 'hidden';
}
</script>
We now need to associate this script using Html
<input type="password" name="txtPassword" onkeypress="isCapLockOn(event)" />
<div id="alert" style="visibility:hidden">Caps Lock is on.</div>
Source: Stackoverflow.com