KeyboardEvent Value (keyCodes, metaKey, etc)

Avatar of Chris Coyier
Chris Coyier on (Updated on )

When a KeyboardEvent fires, you can test which key was pressed because that event contains information you can write logic against.

document.addEventListener("keydown", function(event) {
  console.log(event.which);
})

For example, by pressing a, you’ll get 65. Apparently it’s best to write logic against which, as keyCode and charCode are complicated:

The event.which property normalizes event.keyCode and event.charCode. It is recommended to watch event.which for keyboard key input.

And:

In a keypress event, the Unicode value of the key pressed is stored in either the keyCode or charCode property, never both. If the key pressed generates a character (e.g. ‘a’), charCode is set to the code of that character, respecting the letter case. (i.e. charCode takes into account whether the Shift key is held down). Otherwise, the code of the pressed key is stored in keyCode.

Tester Tool

Keycode values

Here’s a table that contains the values from event.which.

Key Code
backspace 8
tab 9
enter 13
shift 16
ctrl 17
alt 18
pause/break 19
caps lock 20
escape 27
(space) 32
page up 33
page down 34
end 35
home 36
left arrow 37
up arrow 38
right arrow 39
down arrow 40
insert 45
delete 46
0 48
1 49
2 50
3 51
4 52
5 53
6 54
7 55
8 56
9 57
a 65
b 66
c 67
d 68
Key Code
e 69
f 70
g 71
h 72
i 73
j 74
k 75
l 76
m 77
n 78
o 79
p 80
q 81
r 82
s 83
t 84
u 85
v 86
w 87
x 88
y 89
z 90
left window key 91
right window key 92
select key 93
numpad 0 96
numpad 1 97
numpad 2 98
numpad 3 99
numpad 4 100
numpad 5 101
numpad 6 102
numpad 7 103
Key Code
numpad 8 104
numpad 9 105
multiply 106
add 107
subtract 109
decimal point 110
divide 111
f1 112
f2 113
f3 114
f4 115
f5 116
f6 117
f7 118
f8 119
f9 120
f10 121
f11 122
f12 123
num lock 144
scroll lock 145
semi-colon 186
equal sign 187
comma 188
dash 189
period 190
forward slash 191
grave accent 192
open bracket 219
back slash 220
close braket 221
single quote 222

Zell Liew noticed that 3 of these keycodes were different in Firefox than the rest of the browsers

  • ; is 59 in Firefox but 186 in other browsers.
  • = is 61 in Firefox but 187 in other browsers.
  • - is 173 in Firefox but 189 in other browsers.

These keycode values are only valid during in keydown and keyup events. On Mac, keypress events give you an completely different set of codes. For example:

Keyevent.which in keydownevent.which in keypress
a6597
b6698
c6799