JavaScript键盘

JavaScript键盘事件侦听

 

在使用JavaScript做WEB键盘事件侦听捕获时，主要采用onkeypress、onkeydown、onkeyup三个事件进行出来。该三个事件的执行顺序如下：onkeydown -> onkeypress ->onkeyup。在一般情况下，采用三种键盘事件均可对键盘输入进行有效的响应。当在实际使用中，会发现这几者有些不同的差别。
        onkeypress事件不能对系统功能键(例如：后退、删除等，其中对中文输入法不能有效响应)进行正常的响应，onkeydown和onkeyup均可以对系统功能键进行有效的拦截，但事件截获的位置不同，可以根据具体的情况选择不同的键盘事件。

        由于onkeypress不能对系统功能键进行捕获，导致window.event对象的keyCode属性和onkeydown，onkeyup键盘事件中获取的keyCode属性不同，主要表现在onkeypress事件的keyCode对字母的大小写敏感，而onkeydown、onkeyup事件不敏感；onkeypress事件的keyCode无法区分主键盘上的数字键和付键盘数字键的，而onkeydown、onkeyup的keyCode对主付键盘的数字键敏感。

---

注：在Maxthon浏览器中，onkeydown和onkeyup有连续响应两次键盘事件的BUG，onkeydown不能正常地对F1~F12的功能键进行正常的截获(onkeyup没有发现该问题)，具体原因不明。不知道以后是否会进行订正。

=========================================================

Javascript 键盘 keyCode 键码值表

1.字母和数字键的键码值(keyCode)

按键	键码
A	65
B	66
C	67
D	68
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
0	48
1	49
2	50
3	51
4	52
5	53
6	54
7	55
8	56
9	57

2.数字键盘上的键的键码值(keyCode) 功能键键码值(keyCode)

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

 3.控制键键码值(keyCode)

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

 

 ===========================================

JavaScript键盘事件测试小结

http://lifesinger.org/blog/wp-content/uploads/2008/08/keyboard_events.html

 

August 25th, 2008

测试环境

• 系统：Windows Vista Ultimate SP1
• 输入法：谷歌拼音输入法 1.2.30.71
• IE版本：ie6, ie7, ie8 beta1
• Firefox版本：2.0.0.16, 3.0.1
• Safari版本：3.1.2
• Opera版本：9.51

测试结果

	输入法未开启时	输入法开启时
Firefox	正常按下再放起A键，会依次触发keydown, keypress, input, keyup 仅按下修饰键（Ctrl/Shift/Alt）时，不会触发keypress. 注意：按下Esc, Insert, Tab, Pause, Left, Up, Enter等键时，也会触发keypress. 小结：keypress在按下非字符键时，有些会触发，有些不会触发，具体浏览器还不同。 仅在输入框的值有变化时，才会触发input. 比如Backspace键会引起值的变化，因此会触发input. 但是要注意：光标在输入值最后面时，按下Delete键不会改变输入值，但依旧会触发input. 按住某键不放时，会连续触发keydown. 当按下的是会触发keypress的键（参考上面第2条）时候，还会连续触发keypress. 同样，如果按下的是会触发input的键，也会连续触发input. Ctrl+C/V/X快捷键粘贴复制等操作时，会依次触发keydown, keydown, keypress, input, keyup, keyup. 其中input仅在值有变化时才触发（比如粘贴一张图片到文字输入框时，不会触发input）。 Ctrl+Z/Y操作时，和第5条规律一致。 通过鼠标右键进行粘贴复制等操作时，仅会触发input.	输入法中输入第一个字符时，触发keydown, keypress. 输入过程中不会触发键盘事件，输入完成时，会触发input, input, keyup. 输入法开启时，输入数字时，和输入法未开启时一致。
IE	和Firefox基本一致，就是input改成propertychange. 注意： 2. 在ie中，仅字符键会触发keypress. 这比firefox强。 3. 在ie中，Esc和Backspace功能一样，这和firefox不同。在ie中，Delete键没有改变值时，不会触发propertychange. 5. 在ie中，Ctrl+C/X/V不会触发keypress. 6. 在ie中，如果监听的事件中YAHOO.log这种页面输出的语句时，会导致Ctrl+Z/Y失效。没有输入语句时不会。（这可以认为是IE的Bug）	输入法中输入第一个字符时，触发keydown, keyup. 输入过程中也会连续触发keydown, keyup. 输入完成时，触发keydown, propertychange, keyup. （无论怎样都不会触发keypress） 输入法开启时，输入数字时，和输入法未开启时一样，但不会触发keypress.
Safari	大部分和Firefox一致。注意以下几条： 2. 和IE类似，仅字符键会触发keypress. 5. 和IE一致。	输入法中输入第一个字符时，触发keydown, input, keyup. 输入过程中会连续触发keydown, input, input, keyup. 输入完成时，触发keydown, input, input, keyup. （和IE一样，不会触发keypress） 输入法开启时，输入数字时，和IE一样，不会触发keypress.
Opera	大部分和Firefox一致。注意以下几条： 2. 所有键都会触发keypress. 4. 连续按下某键时，仅会连续触发keypress. （这个处理比其它浏览器合理） 5. 多个keypress.	和上面的浏览器都不同，仅在输入完成时触发input.