键盘与输入事件

键盘事件

1. 键盘事件

事件	说明
keydown	用户按下键盘某个键时触发，而且持续按住会重复触发
keypress	用户按下键盘某个键并产生字符时触发，而且持续按住会重复触发，ESC 也可以触发 DOM 3 废弃，推荐使用 textInput 事件
keyup	用户释放键盘上某个键时触发

2. 键码

对于 keydown 和 keyup 事件，event 上有一个 keyCode 属性，保存键码

• 对于字母和数字键，keyCode 对应小写字母和数字的 ASCII 码
• 对于非字符键

键	键码	键	键码
BackSpace	8	数字键盘 8	104
Tab	9	数字键盘 9	105
Clear	12	数字键盘 +	107
Enter	13	数字键盘 -	109
Shift	16	数字键盘 .	110
Control	17	数字键盘 /	111
Alt	18	F1	112
Cape Lock	20	F2	113
Esc	27	F3	114
Spacebar	32	F4	115
Page Up	33	F5	116
Page Down	34	F6	117
End	35	F7	118
Home	36	F8	119
左箭头	37	F9	120
上箭头	38	F10	121
右箭头	39	F11	122
下箭头	40	F12	123
Insert	45	Num Lock	144
Delete	46	Scroll Lock	145
左 window	91	分号(IE、Safari、Chrome)	186
右 window	92	分号(Opera、FF)	59
Context Menu	93	,<	188
数字键盘 0	96	.>	190
数字键盘 1	97	/?	191
数字键盘 2	98	/?	191
数字键盘 3	99	`~	192
数字键盘 4	100	=+	61
数字键盘 5	101	[{	219
数字键盘 6	102	\ |	220
数字键盘 7	103	]}	221
		'"	222

3. charCode

• 按键字符对应的 ASCII 编码
• 可以使用 String.fromCharCode() 转化为实际的字符

4. 修饰键

键盘上的修饰键 Shift、Ctrl、Alt、Meta 经常用于修改鼠标事件行为

可以获取以下几个修饰键状态，true 为按下，false 为没按下：

• shiftKey、ctrlKey、altKey、metaKey

输入事件

事件	说明
textInput	在字符被输入到可编辑区域时触发

1. 与 keypress 的不同

• keypress 可在任何有焦点元素上触发，而 textInput 只可以在可编辑区域上触发
• keypress 可在影响文本时触发（包括退格键），而 textInput 只有在新字符被插入时才出发

2. 获取输入字符

• 在 event 上有一个 data 可获取要插入的字符
• 区分大小写，按 s 时为 s，按 shift + s 时为 S

3. 获取输入文本的手段

• 在 event 上有一个 inputMethod 可获取输入文本的手段

值	手段
0	浏览器不能确定是什么手段
1	键盘
2	黏贴
3	拖放操作
4	IME
5	表单选项
6	手写
7	语音
8	组合方式
9	脚本