键盘事件及 KeyCode 对照表

键盘事件及 KeyCode 对照表

键盘事件

用户操作键盘时对应事件的 3 种类型：

• ​keydown​：在键盘上按下某个键时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回 false 时，会取消默认的动作。
• ​keypress​：按下某个键盘键并释放时触发。如果按住某个键，会不断触发该事件。该事件处理函数返回 false 时，会取消默认的动作（如输入的键盘字符）。
• ​keyup​：释放某个键盘键时触发。该事件仅在松开键盘时触发一次，不是一个持续的响应状态。

Tips: 某些浏览器不允许使用 keypress​ 事件获取按键信息。

// 监听方式一： on + keydown

document.onkeydown = function (e) {

  // 当检测到键盘按下 w 键时的操作

  if (e.keyCode === 87) {

    // ...

  }

}

// 监听方式二： addEventListener + keyup

document.addEventListener('keyup', function(e) {

  // 当检测到键盘放开 w 建时的操作

  if (e.keyCode === 87) {

    // ...

  }

})

键盘事件属性

属性	说明
keyCode	该属性包含键盘中对应键位的键值
charCode	该属性包含键盘中对应键位的 Unicode 编码，仅 DOM 支持
target	发生事件的节点（包含元素），仅 DOM 支持
srcElement	发生事件的元素，仅 IE 支持
shiftKey	是否按下 Shift 键，如果按下返回 true，否则为false
ctrlKey	是否按下 Ctrl 键，如果按下返回 true，否则为false
altKey	是否按下 Alt 键，如果按下返回 true，否则为false
metaKey	是否按下 Mtea 键，如果按下返回 true，否则为false，仅 DOM 支持

键盘响应顺序

当按下键盘时，会连续触发多个事件，它们将按如下顺序发生。

• 对于字符键来说，键盘事件的响应顺序：keydown​ → keypress​ → keyup​。
• 对于非字符键（如功能键或特殊键）来说，键盘事件的相应顺序：keydown​ → keyup​。
• 如果按下字符键不放，则 keydown​ 和 keypress​ 事件将逐个持续发生，直至松开按键。
• 如果按下非字符键不放，则只有 keydown​ 事件持续发生，直至松开按键。

KeyCode 对照表

字母数字键键码值

按键	键码	按键	键码	按键	键码	按键	键码
A	65	J	74	S	83	1	49
B	66	K	75	T	84	2	50
C	67	L	76	U	85	3	51
D	68	M	77	V	86	4	52
E	69	N	78	W	87	5	53
F	70	O	79	X	88	6	54
G	71	P	80	Y	89	7	55
H	72	Q	81	Z	90	8	56
I	73	R	82	0	48	9	57

数字键盘键码值

按键	键码	按键	键码
0	96	8	104
1	97	9	105
2	98	*	106
3	99	+	107
4	100	Enter
5	101	-	109
6	102	.	110
7	103	/	111

功能键键码值

按键	键码	按键	键码
F1	112	F7	118
F2	113	F8	119
F3	114	F9	120
F4	115	F10	121
F5	116	F11	122
F6	117	F12	123

控制键键码值

按键	键码	按键	键码	按键	键码	按键	键码
BackSpace	8	Esc	27	Right Arrow	39	-_	189
Tab	9	Spacebar	32	Dw Arrow	40	.>	190
Clear	12	Page Up	33	Insert	45	/?	191
Enter	13	Page Down	34	Delete	46	`~	192
Shift	16	End	35	Num Lock	144	[{	219
Control	17	Home	36	;:	186	╲┆	220
Alt	18	Left Arrow	37	=+	187	]}	221
Cape Lock	20	Up Arrow	38	,<	188	'"	222