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

  1. 正常按下再放起A键，会依次触发keydown, keypress, input, keyup
  2. 仅按下修饰键（Ctrl/Shift/Alt）时，不会触发keypress. 注意：按下Esc, Insert, Tab, Pause, Left, Up, Enter等键时，也会触发keypress. 小结：keypress在按下非字符键时，有些会触发，有些不会触发，具体浏览器还不同。
  3. 仅在输入框的值有变化时，才会触发input. 比如Backspace键会引起值的变化，因此会触发input. 但是要注意：光标在输入值最后面时，按下Delete键不会改变输入值，但依旧会触发input.
  4. 按住某键不放时，会连续触发keydown. 当按下的是会触发keypress的键（参考上面第2条）时候，还会连续触发keypress. 同样，如果按下的是会触发input的键，也会连续触发input.
  5. Ctrl+C/V/X快捷键粘贴复制等操作时，会依次触发keydown, keydown, keypress, input, keyup, keyup. 其中input仅在值有变化时才触发（比如粘贴一张图片到文字输入框时，不会触发input）。
  6. Ctrl+Z/Y操作时，和第5条规律一致。
  7. 通过鼠标右键进行粘贴复制等操作时，仅会触发input.
  1. 输入法中输入第一个字符时，触发keydown, keypress. 输入过程中不会触发键盘事件，输入完成时，会触发input, input, keyup.
  2. 输入法开启时，输入数字时，和输入法未开启时一致。

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）

  1. 输入法中输入第一个字符时，触发keydown, keyup. 输入过程中也会连续触发keydown, keyup. 输入完成时，触发keydown, propertychange, keyup. （无论怎样都不会触发keypress）
  2. 输入法开启时，输入数字时，和输入法未开启时一样，但不会触发keypress.

Safari

大部分和Firefox一致。注意以下几条：

2. 和IE类似，仅字符键会触发keypress.

5. 和IE一致。

  1. 输入法中输入第一个字符时，触发keydown, input, keyup. 输入过程中会连续触发keydown, input, input, keyup. 输入完成时，触发keydown, input, input, keyup. （和IE一样，不会触发keypress）
  2. 输入法开启时，输入数字时，和IE一样，不会触发keypress.

Opera

大部分和Firefox一致。注意以下几条：

2. 所有键都会触发keypress.

4. 连续按下某键时，仅会连续触发keypress. （这个处理比其它浏览器合理）

5. 多个keypress.

和上面的浏览器都不同，仅在输入完成时触发input.