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?

it worked with me, chrome, what is the browser you are testing one? — mfadel, Apr 21 '12 at 05:37
I was able to replicate on my Mac. See my answer for the explanation why. ;-) — Will Klein, Apr 21 '12 at 05:50

score 2 · Answer 1 · answered Apr 21 '12 at 05:44

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

Thanks much for the Windows test! How I miss my Windows machine sometimes... :) — sramam, Apr 21 '12 at 06:25

score 2 · Accepted Answer · answered Apr 21 '12 at 05:47

2

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.

answered Apr 21 '12 at 05:47

Will Klein

2,244
17
18

wow. Never struck me to try it on a terminal. Thanks. Atleast I can now move on to bigger and better challenges. – sramam Apr 21 '12 at 06:26
Yeah, this surprised me too. Good luck! – Will Klein Apr 21 '12 at 06:42

Ram · Answer 3 · 2012-04-21T05:56:34.460

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:"'"
};

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

3 Answers3