JS Caps Lock Detect
Detects Caps Lock on password field input and toggles warning with the caps lock keydown event
HTML
<input type="text" id="pwd">
<p id="caps"></p>
CSS
p {
color: crimson;
}
JavaScript
$(function() {
$('#pwd').on('keypress', shiftDetect);
$(window).on('keydown', capsDetect);
});
var isDetected = false;
var capsOn = false;
function shiftDetect(event) {
var caps = $('#caps');
var which = event.keyCode;
var shift = event.shiftKey;
var targ = event.target;
if ((which >= 65 && which <= 90 && !shift) || (which >= 97 && which <= 122 && shift)) {
caps.html('CAPS LOCK IS ON');
isDetected = true;
capsOn = true;
} else if((which >= 65 && which <= 90 && shift) || (which >= 97 && which <= 122 && !shift)){
caps.html('');
}
}
function capsDetect(event) {
if(event.keyCode === 20 && isDetected) {
capsOn = (capsOn)? false:true;
if(capsOn) {
$('#caps').html('CAPS LOCK IS ON');
} else {
$('#caps').html('');
}
}
}