jQuery Caps-lock cross-browser detector

by gnel

HTML

Type Here:<br><input type="text" id="textbox"><br>On each keypress I will tell if caps lock is on<br><br> CAPS LOCK: <span id="cap"></span>

CSS

.red {
  color: red;    
  font-weight:bold;
}
.green {
  color: green;
  font-weight:bold;    
}

JavaScript

$('#textbox').keypress(function(e) { 
    var s = String.fromCharCode( e.which );
    if (s.toUpperCase() === s && s.toLowerCase() !== s && !e.shiftKey) {
        $('#cap').removeClass('red').addClass('green').html('ON');
    } else {
        $('#cap').removeClass('green').addClass('red').html('OFF');
    }
});