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

Question

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?

Answer 1

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.

Answer 2

The keypress code is correct on windows, returning the correct key codes for the letter as it would be printed on keypress.

CAPS LOCK ON:

PRINTED 
CHARACTER       keyup/down      keypress    Modifiers
z               90              122         +Shift
a               65              97          +Shift
Z               90              90  
A               65              65

caps lock off:
Z               90              90          +Shift
A               65              65          +Shift
z               90              122 
a               65              97

Answer 3

The keydown, keyup, and keypress events are supported by all browsers, but there are some interoperability problems because the values of the keyCode property of the event object have never been standardized.

// The legacy keyCode property of the keydown event object is not standardized
// But the following values seem to work for most browsers and OSes.
Keymap.keyCodeToKeyName = {
// Keys with words or arrows on them
8:"Backspace", 9:"Tab", 13:"Enter", 16:"Shift", 17:"Control", 18:"Alt",
19:"Pause", 20:"CapsLock", 27:"Esc", 32:"Spacebar", 33:"PageUp",
34:"PageDown", 35:"End", 36:"Home", 37:"Left", 38:"Up", 39:"Right", 40:"Down", 45:"Insert",  46:"Del",
// Number keys on main keyboard (not keypad)  
48:"0",49:"1",50:"2",51:"3",52:"4",53:"5",54:"6",55:"7",56:"8",57:"9",
// Letter keys. Note that we don't distinguish upper and lower case 
65:"A", 66:"B", 67:"C", 68:"D", 69:"E", 70:"F", 71:"G", 72:"H", 73:"I", 74:"J", 75:"K", 76:"L", `   77:"M", 78:"N", 79:"O", 80:"P", 81:"Q", 82:"R", 83:"S", 84:"T", 85:"U", 86:"V", 87:"W", 88:"X", 89:"Y", 90:"Z",`

// Keypad numbers and punctuation keys. (Opera does not support these.)
96:"0",97:"1",98:"2",99:"3",100:"4",101:"5",102:"6",103:"7",104:"8",105:"9", 106:"Multiply", 107:"Add", 109:"Subtract", 110:"Decimal", 111:"Divide",
// Function keys
112:"F1", 113:"F2", 114:"F3", 115:"F4", 116:"F5", 117:"F6", 118:"F7", 119:"F8", 120:"F9", 121:"F10", 122:"F11", 123:"F12", 124:"F13", 125:"F14", 126:"F15", 127:"F16", 128:"F17", 129:"F18",  130:"F19", 131:"F20", 132:"F21", 133:"F22", 134:"F23", 135:"F24",
// Punctuation keys that don't require holding down Shift
// Hyphen is nonportable: FF returns same code as Subtract
59:";", 61:"=", 186:";", 187:"=", // Firefox and Opera return 59,61 188:",", 190:".", 191:"/", 192:"`", 219:"[", 220:"\\", 221:"]", 222:"'"
};