`
aaron0927
  • 浏览: 27688 次
  • 性别: Icon_minigender_1
  • 来自: 上海
社区版块
存档分类
最新评论

onkeyup,onkeydown,onkeypress区别

阅读更多
  1. 在使用JavaScript做WEB键盘事件侦听捕获时,主要采用onkeypress、onkeydown、onkeyup三个事件进行出来。该三个事件的执行顺序如下:onkeydown -> onkeypress ->onkeyup。在一般情况下,采用三种键盘事件均可对键盘输入进行有效的响应。当在实际使用中,会发现这几者有些不同的差别。   
  2. onkeypress事件不能对系统功能键(例如:后退、删除等,其中对中文输入法不能有效响应)进行正常的响应,onkeydown和onkeyup均可以对系统功能键进行有效的拦截,但事件截获的位置不同,可以根据具体的情况选择不同的键盘事件。   
  3. 由于onkeypress不能对系统功能键进行捕获,导致window.event对象的keyCode属性和onkeydown,onkeyup键盘事件中获取的keyCode属性不同,主要表现在onkeypress事件的keyCode对字母的大小写敏感,而onkeydown、onkeyup事件不敏感;onkeypress事件的keyCode无法区分主键盘上的数字键和付键盘数字键的,而onkeydown、onkeyup的keyCode对主付键盘的数字键敏感。   
  4. 在Maxthon浏览器中,onkeydown和onkeyup有连续响应两次键盘事件的BUG,onkeydown不能正常地对F1~F12的功能键进行正常的截获(onkeyup没有发现该问题),具体原因不明。不知道以后是否会进行订正。   
  5.   
  6. 键盘事件包括keydown、kepress和keyup三种,每次敲击键盘都会(依次?)触发这三种事件,其中keydown和keyup是比较低级的接近于硬件的事件,通俗的理解是这两个事件可以捕获到你敲击了键盘中某个键;而keypress是相对于字符层面的较为高级点的事件,这个事件能够捕捉到你键入了哪个字符。可以这样理解,如果你敲击了A键,keydown和keyup事件只是知道你敲击了A键,它并不知道你敲的是大写的A(你同时按下了Shift键)还是敲的是小写a,它是以"键"为单位,你敲入了大写的A,它只是当成你敲下了shift和A两个键而已,但是keypress可以捕捉到你是敲入的大写的A还是小写的a.   
  7.   
  8. 在介绍Prototype中Event对象前先介绍一下浏览器中的事件模型,浏览器中的事件主要有HTML事件、鼠标事件和键盘事件,前两种事件比较好理解,这里主要解释一下键盘事件以及它在IE和firefox中的区别.   
  9.   
  10. 还要理解一个概念是键盘中的键分为字符(可打印)键和功能键(不可打印),功能键包括Backspace, Enter, Escape, the arrow keys, Page Up, Page Down, and F1 through F12 等   
  11.   
  12. 下面说一下键盘事件的具体使用方法,   
  13.   
  14. 键盘事件的event对象中包含一个keyCode属性,IE中只有这一个属性,当为keydown和keyup 事件是,keycode属性表示你具体按下的键(也称为virtual keycode),当捕捉的是keypress事件时keyCode属性指的是你键入的字符(character code)   
  15.   
  16. 在firefox中情况有些不同,event对象包含一个keyCode属性和一个charCode属性,keydown和keyup事件的时候,keyCode表示的就是你具体按的键,charCode为0;当捕捉的是keypress事件时,keyCode为0,charCode指的是你按下的字符   
  17.   
  18. 当捕捉的是keypress事件时,当你按的是可打印字符时,keyCode为0,charCode指的是你按下的字符的键值,当你按的是不可打印字符时,keyCode为按下的键的键值,charCode为0  
  19.   
  20. 注意:功能键不会触发keypress事件,因为keypress对应的就是可打印的字符,但是有一点IE和FF 中的区别,你按下一个字符键的同时按下alt键,在IE中不触发keypress事件,但是在ff中可触发,我发现在IE中按下ctrl键的时候只有按下q键会触发事件其他的要么不会触发事件,要么被浏览器IE自身捕获了,例如你按下ctrl_A,全选某个东西,你按ctrl_S保存文件,但是在FF中就好多了,事件都是先传递到网页,再向外传递   
  21.   
  22. 鉴于IE和FF中的区别,如果你比较懒的话,建议只使用keydow和keyup事件,这两种事件的使用在IE和FF中基本上没有区别,也不要捕获ctrl_A等被浏览器定义为快捷键的事件   
  23.   
  24. 键盘事件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处理鼠标粘贴、拖入这两个动作就可以了。

分享到:
评论

相关推荐

    onkeypress和onkeydown以及onkeyup的区别

    onkeypress和onkeydown以及onkeyup的区别onkeypress和onkeydown以及onkeyup的区别onkeypress和onkeydown以及onkeyup的区别

    onkeyup,onkeydown和onkeypress的区别介绍

    三者在事件的响应上还有一点不同,就是onkeydown 、onkeypress事件响应的时候输入的字符并没有被系统接受,而响应onkeyup的时候,输入流已经被系统接受

    javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick

    昨天群里面的朋友问了个比较有意思的问题,keydown,keyup,keypress事件的先后顺序。

    javascript-event-keycode-finder:找出javascript的OnKeyDown,OnKeyUp和OnKeyPress事件调用的键码的简单工具

    Javascript事件键码查找器 找出javascript的OnKeyDown,OnKeyUp和OnKeyPress事件调用的键码的简单工具。 现场演示: :

    浅析OnKeyPress事件和OnKeyDownOnKeyUp事件

    浅析OnKeyPress事件和OnKeyDown、OnKeyUp事件

    如何改变“behaviors”的缺省事件?

     *" onDblClick="" onKeyDown="" onKeyPress="" onKeyUp="" onMouseDown="" onMouseOut="" onMouseOver="" onMouseUp=""&gt;  将“ onClick="*" ”中的“*”移到“ onMouseOver="" ”中,改为: ...

    html鼠标事件整理

    个人整理的html所有的鼠标事件及方法:onblur 、onclick 、ondblclick 、onfocus 、onkeydown 、onkeypress 、onkeydown 、onKeyUp 、onmousedown 、onmousemove 、onmouseout 、onmouseover 、onmouseup ...

    AlphaControls_12.13_Stable

    * Added OnEnter, OnExit, OnKeyDown, OnKeyPress and OnKeyUp events in arc controls * Added OnSetTextFromValue and OnSetValueFromText events in the TsTrackEdit component * Added OnDropDown and ...

    javascript中键盘事件用法实例分析

    键盘事件包含onkeydown、onkeypress和onkeyup这三个事件 事件初始化 function keyDown(){} [removed] = keyDown; //论按下键盘上的哪个键,都将调用KeyDown()函数。 DOM标准下 function keyDown(e) { var ...

    浏览器事件大全.txt

    一般事件 ...onkeypress IE4、N4 当键盘上的某个键被按下并且释放时触发此事件. onkeydown IE4、N4 当键盘上某个按键被按下时触发此事件 onkeyup IE4、N4 当键盘上某个按键被按放开时触发此事件

    PHP100视频教程 50: Ajax+PHP检查用户名或邮件(三)

    onkeydown 事件会在用户按下一个键盘按键时发生。onkeypress 事件会在键盘按键被按下并释放一个键时发生。onkeyup 事件会在键盘按键被松开时发生。onmousedown 事件会在鼠标按键被按下时发生。onmousemove 事件会在...

    Html事件列表

    onKeyPress HTML: 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onKeyDown HTML: 当键盘上...onKeyUp HTML: 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]

    浅谈js键盘事件全面控制

    用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown、 onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件,依次是keydown,keypress,...

    JavaScript语言参考手册

    onKeyPress onKeyUp onLoad onMouseDown onMouseMove onMouseOut onMouseOver onMouseUp onMove onReset onResize onSelect onSubmit onUnload 第十章 LiveWire 数据库服务 本章包含了服务器端与 LiveWire 关联的...

    js 键盘记录实现(兼容FireFox和IE)

    用js实现键盘记录,要关注浏览器的三种按键事件类型,即keydown,keypress和keyup,它们分别对应onkeydown、onkeypress和onkeyup这三个事件句柄。一个典型的按键会产生所有这三种事件,依次是keydown,keypress,...

    事件高级用法及兼容写法

    键盘事件:onkeydown onkeyup onkeypress 键盘事件的属性: key 在IE中不支持 键名称 keyCode 键码 滚轮事件: Onwheel 标准浏览器和IE 对象.addEventListener(“DOMMouseScroll”,事件函数,false) 火狐 滚轮事件对...

    JS正则表达式实现只允许大小写字母,数字,空白字符(限制粘贴)

    是一个限制用户大小写加限制粘贴,关键是做一个提示用户还剩余多个字符的text...写ONKEYPRESS时不支持BACKSPACE,写ONKEYDOWN事件时也会有空的问题! 当然还有一个小缺陷,就是点BACKSPACE光标会自动跳到最右边=。=!

    js事件总结

    列出一部分: ...onDblClick IE4|N4|O 鼠标双击事件 onMouseDown IE4|N4|O 鼠标上的按钮被按下了 onMouseUp IE4|N4|O 鼠标按下...onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]

    onmouse事件总结

    onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象] onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象] onKeyUp IE4|N4|O 当...

Global site tag (gtag.js) - Google Analytics