onkeyup,onkeydown,onkeypress差异 _Web前端

onkeyup,onkeydown,onkeypress区别

在使用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没有发现该问题)，具体原因不明。不知道以后是否会进行订正。 ??
??
键盘事件包括keydown、kepress和keyup三种，每次敲击键盘都会(依次？)触发这三种事件，其中keydown和keyup是比较低级的接近于硬件的事件，通俗的理解是这两个事件可以捕获到你敲击了键盘中某个键；而keypress是相对于字符层面的较为高级点的事件，这个事件能够捕捉到你键入了哪个字符。可以这样理解，如果你敲击了A键，keydown和keyup事件只是知道你敲击了A键，它并不知道你敲的是大写的A(你同时按下了Shift键)还是敲的是小写a，它是以"键"为单位，你敲入了大写的A，它只是当成你敲下了shift和A两个键而已，但是keypress可以捕捉到你是敲入的大写的A还是小写的a. ??
??
在介绍Prototype中Event对象前先介绍一下浏览器中的事件模型，浏览器中的事件主要有HTML事件、鼠标事件和键盘事件，前两种事件比较好理解，这里主要解释一下键盘事件以及它在IE和firefox中的区别. ??
??
还要理解一个概念是键盘中的键分为字符(可打印)键和功能键(不可打印)，功能键包括Backspace, Enter, Escape, the arrow keys, Page Up, Page Down, and F1 through F12 等 ??
??
下面说一下键盘事件的具体使用方法， ??
??
键盘事件的event对象中包含一个keyCode属性，IE中只有这一个属性，当为keydown和keyup 事件是，keycode属性表示你具体按下的键(也称为virtual keycode)，当捕捉的是keypress事件时keyCode属性指的是你键入的字符(character code) ??
??
在firefox中情况有些不同，event对象包含一个keyCode属性和一个charCode属性，keydown和keyup事件的时候，keyCode表示的就是你具体按的键，charCode为0；当捕捉的是keypress事件时，keyCode为0，charCode指的是你按下的字符 ??
??
当捕捉的是keypress事件时，当你按的是可打印字符时，keyCode为0，charCode指的是你按下的字符的键值，当你按的是不可打印字符时，keyCode为按下的键的键值，charCode为0??
??
注意：功能键不会触发keypress事件，因为keypress对应的就是可打印的字符，但是有一点IE和FF 中的区别，你按下一个字符键的同时按下alt键，在IE中不触发keypress事件，但是在ff中可触发，我发现在IE中按下ctrl键的时候只有按下q键会触发事件其他的要么不会触发事件，要么被浏览器IE自身捕获了，例如你按下ctrl_A，全选某个东西，你按ctrl_S保存文件，但是在FF中就好多了，事件都是先传递到网页，再向外传递 ??
??
鉴于IE和FF中的区别，如果你比较懒的话，建议只使用keydow和keyup事件，这两种事件的使用在IE和FF中基本上没有区别，也不要捕获ctrl_A等被浏览器定义为快捷键的事件 ??
??
键盘事件event对象还有三个其他的属性altKey, ctrlKey, and shiftKey 来判断你按下一个键的时候是否按下了alt等键，这三个属性使用比较简单，三种事件都可以使用，也不存在ie和ff的兼容性问题

键盘键和键盘键控制值一览表（键盘按键对应代码表）

适合EXT 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
数字键盘 1 <--------> 96
数字键盘 2 <--------> 97
数字键盘 3 <--------> 98
数字键盘 4 <--------> 99
数字键盘 5 <--------> 100
数字键盘 6 <--------> 101
数字键盘 7 <--------> 102
数字键盘 8 <--------> 103
数字键盘 9 <--------> 104
数字键盘 0 <--------> 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
F13 <--------> 124
F14 <--------> 125
F15 <--------> 126
Backspace <--------> 8
Tab <--------> 9
Clear <--------> 12
Enter <--------> 13
Shift <--------> 16
Control <--------> 17
Alt <--------> 18
Caps Lock <--------> 20
Esc <--------> 27
空格键 <--------> 32
Page Up <--------> 33
Page Down <--------> 34
End <--------> 35
Home <--------> 36
左箭头 <--------> 37
向上箭头 <--------> 38
右箭头 <--------> 39
向下箭头 <--------> 40
Insert <--------> 45
Delete <--------> 46
Help <--------> 47
Num Lock <--------> 144
; : <--------> 186
= + <--------> 187
- _ <--------> 189
/ ? <--------> 191
` ~ <--------> 192
[ { <--------> 219
| <--------> 220
] } <--------> 221
'' ' <--------> 222

onkeypress：能够产生该事件的字符为：
Letters: A - Z (uppercase and lowercase)
Numerals: 0 - 9
Symbols: ! @ # $ % ^ & * ( ) _ - + = < [ ] { } , . / ? \ | ' ` " ~
System: ESC, SPACEBAR, ENTER
如果是输入Ctrl+C、Delete之类的，就不会产生该事件。
特别注意：对于中文没有效果
获取所按的键ASCII码（即大小写字母有分），可使用event.keyCode，要转换也可以对event.keyCode进行操作。
事件产生时value还没有包含所输入的字符。
如果要取消输入，可以使用event.keyCode = 0，也可以使用event.returnValue = false。
想获取控制键的情况，则使用event.altKey、altLeft、ctrlKey、ctrlLeft、shiftKey、shiftLeft。
当按住键盘不放时，会持续产生该事件。

这样看来，它只能处理中规中矩的事情。如输入只能大写，输入只能数字（但粘贴功能还会破坏这些规则）。

onkeydown：任何按键都能产生该事件，
即使按一下Ctrl键，也是激发该事件
用输入法输入中文时，每输入一个编码都产生一个事件，多得让人受不了，并且获得到的keyCode却是229。
其获取的是键盘的扫描码（即大小写字母不分），可使用event.keyCode，但不能使用event.keyCode来修改。（但这又是个例外：if (event.keyCode === 13) event.keyCode = 9;）
事件产生时value还没有包含所输入的字符。
如果要取消输入，不能使用event.keyCode = 0这种方式，但可以使用event.returnValue = false。
当按住键盘不放时，会持续产生该事件。

onkeyup：任何按键都能产生该事件，
即使按一下Ctrl键，也是激发该事件
用输入法输入中文时，每输入一个编码都产生一个事件，虽然也没办法获取汉字，但keyCode还好是编码。
其获取的是键盘的扫描码（即大小写字母不分），可使用event.keyCode，但不能使用event.keyCode来修改。
事件产生时value已经包含所输入的字符了。
event.keyCode = 0 与 event.returnValue = false都不能取消该事件。
当按住键盘不放时，不会持续产生该事件。只有最后放开，才产生。

我的目的是限制用户输入的长度（特别是中文），看了这三个事件，都没有一个方便的家伙。

有一种观点：长度验证不必在输入时进行，只要在光标离开或提交时验证，其实这不是最理想的，试想一下，一个输入框，用户心血来潮地输入了一大堆东西，然后提交，这时系统才告诉他不能输入这么多，这是个糟糕的体验。

另外我也看到一种处理方法：在输入框的onkeypress、onkeyup、onblur、onchange事件中全部加上超长取消的处理。感觉太多了，只要onkeyup体现即时控制，onchange处理鼠标粘贴、拖入这两个动作就可以了。