Search code examples
javascriptkeycodelowercasecapslock

Javascript/jQuery: Unable to get proper keyCode when capsLock is ON

I'm trying to determine the proper key/char code in javascript when a key is pressed. It seems that when the CapsLock key is on, lowercase letters are not detectable. 

Try the combinations:
1. a                 = a (97) shift:false
2. Shift+A           = A (65) shift:true
3. Capslock,A        = A (65) shift:false
4. Capslock, Shift+A = A (65) shift:true  -- this should be 'a'

Cases 2 & 4 are indistinguishable.

A simple fiddle to illustrate the problem. http://jsfiddle.net/sramam/pet5G/3/

OUTPUT:
keypress 'a' shift:false charCode97 keyCode:97 which:97
keypress 'A' shift:true charCode65 keyCode:65 which:65
(CAPSLOCK ON)
keypress 'A' shift:false charCode65 keyCode:65 which:65
keypress 'A' shift:true charCode65 keyCode:65 which:65

I only have a MacPro(Lion) to try this on. Is it even possible to detect character to be rendered correctly?

Solution

  • The keypress detection is in fact "correct." The issue you're running into is that on OS X Lion, if you enable caps lock and press shift, it IGNORES caps lock. On Windows, shift + caps lock will return lower case letters. On your Mac, it will return upper case letters. This is not a matter of how the browser interprets a keypress, it's what the operating system registers.

    Try typing in ANY application, i.e. Terminal, and you should see what I mean.

    This may be the case for other Mac OS versions, I tested this on my MacBook Air w/ OS X Lion.