How do you tell if caps lock is on using JavaScript?

javascript keyboard capslock
nickf picture nickf · Dec 8, 2008 · Viewed 109.7k times · Source

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?

Answer

user110902 picture user110902 · May 22, 2009

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.

Related questions

Binding arrow keys in JS/jQuery

How do I go about binding a function to left and right arrow keys in Javascript and/or jQuery? I looked at the js-hotkey plugin for jQuery (wraps the built-in bind function to add an argument to recognize specific keys), …

Read More
Run javascript function when user finishes typing instead of on key up?

I want to trigger an ajax request when the user has finished typing in a text box. I don't want it to run the function on every time the user types a letter because that would result in A LOT …

Read More
keycode 13 is for which key

Which is the key on the keyboard having the keycode as 13? switch(key) { case 37: $.keynav.goLeft(); break; case 38: $.keynav.goUp(); break; case 39: $.keynav.goRight(); break; case 40: $.keynav.goDown(); break; case 13: $.keynav.activate(); break; }

Read More