`
aaron0927
  • 浏览: 28439 次
  • 性别: 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处理鼠标粘贴、拖入这两个动作就可以了。

分享到:
评论

相关推荐

    onkeyup,onkeydown和onkeypress的区别介绍

    在JavaScript中,`onkeyup`、`onkeydown`和`onkeypress`是三种与键盘交互相关的事件,它们各自有着特定的用途和响应时机。理解这三个事件的区别对于开发交互式网页应用至关重要。 首先,`onkeydown`事件会在用户按...

    onkeypress和onkeydown以及onkeyup的区别

    onkeypress、onkeydown和onkeyup事件的区别 onkeypress、onkeydown和onkeyup是三种常用的JavaScript事件,都是与键盘输入相关的事件,但它们之间存在着一些细微的区别。 首先,让我们来看一下这三个事件的触发顺序...

    javascript onkeydown,onkeyup,onkeypress,onclick,ondblclick

    为了解决这个问题,可以使用JavaScript中的定时器来区别单击和双击事件。通过设置定时器,在`onclick`事件中启动一个定时器,并在定时器到期前如果发生了`ondblclick`事件,则清除定时器。这样可以确保只有单次点击...

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

    本文将深入探讨`OnKeyDown`、`OnKeyUp`和`OnKeyPress`这三个JavaScript键盘事件,以及如何使用键码(key codes)来识别用户按下或释放的特定按键。 `OnKeyDown`事件是在用户按下键盘上的一个键时触发,不论该键是否...

    js onkeypress与onkeydown 事件区别详细说明

    总结来说,了解并掌握`onkeydown`和`onkeypress`事件的区别,可以帮助开发者更精确地控制用户的键盘输入行为,为用户提供更优质的交互体验。在实际开发中,根据项目需求灵活运用这些事件,能够提高Web应用的可操作性...

    浅析OnKeyPress事件和OnKeyDownOnKeyUp事件

    浅析OnKeyPress事件和OnKeyDown、OnKeyUp事件

    JavaScript 操作键盘的Enter事件(键盘任何事件),兼容多浏览器.docx

    在 JavaScript 中,我们可以使用 onkeydown、onkeyup、onkeypress 等事件处理程序来捕获键盘事件。 二、如何使用 JavaScript 操作键盘的 Enter 事件? 要使用 JavaScript 操作键盘的 Enter 事件,需要使用 ...

    js 键盘事件 鼠标单击事件

    本篇文章将详细介绍`onkeypress`、`onkeyup`和`onkeydown`这三个事件。 #### 二、`onkeypress`事件 `onkeypress`事件会在用户按下并释放一个字母或数字键时触发。此事件不支持系统键(例如箭头键和功能键)。`...

    delphi中的按键说明[文].pdf

    `OnKeyDown`、`OnKeyPress`和`OnKeyUp`是TWinControl类(及其派生类)中用于处理键盘事件的主要方法。以下是这些事件的详细说明: 1. **OnKeyDown** 事件:当用户按下键盘上的任意键时触发,不论是否产生ASCII字符...

    js键盘事件全面控制_兼容FireFox和IE

    JS 键盘事件可以分为三种类型:keydown、keypress 和 keyup,它们分别对应 onkeydown、onkeypress 和 onkeyup 这三个事件句柄。在这三个事件类型中,keydown 和 keyup 比较底层,而 keypress 比较高级。 浏览器的...

    input 高级限制级用法

    &lt;input style="ime-mode:disabled" onkeydown="if(event.keyCode==13)event.keyCode=9"onKeyPress="if ((event.keyCode|| event.keyCode&gt;57)) event.returnValue=false"&gt; ``` 8. **限制输入为英文和数字(有闪烁...

    javascript Event对象详解

    7. **keyCode**:在键盘事件(如onkeydown、onkeyup、onkeypress)中,keyCode属性提供了对应按键的Unicode编码,可用于识别具体按下的键。如果没有键盘事件,其值为0。 8. **offsetX**和**offsetY**:这两个属性...

    键盘 keycode的值 javascript时触发事件时很有用的要素

    在W3C标准事件模型中,可以使用`onkeydown`、`onkeyup`或`onkeypress`等事件监听器来捕捉键盘操作。当这些事件发生时,它们会提供一个事件对象(event object),该对象包含了各种关于事件的详细信息。其中,`event....

    js事件大全.docx

    8. onkeydown、onkeyup和onkeypress:键盘事件,分别在按键被按下、释放以及字符键被按下时触发。它们可以用来实现自定义的键盘快捷键或输入验证。 9. onload:当整个页面或指定资源(如图片)完全加载完毕时触发。...

    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 ...

    js-文本框输入限制.docx

    在JavaScript中,对...通过监听键盘事件(如`onkeyup`, `onkeydown`, `onkeypress`)和数据粘贴事件(如`onpaste`),结合正则表达式进行验证,我们可以创建强大的输入限制功能,确保用户输入的数据格式正确且有效。

    Delphi窗体与组件 课件.ppt

    - OnKeyDown、OnKeyUp和OnKeyPress事件处理键盘输入,允许响应特定的按键组合。 总的来说,理解和熟练运用Delphi窗体与组件是开发高效、用户友好的桌面应用程序的基础,通过调整属性、设计事件处理和组织组件布局,...

    TextBoxJS.

    &lt;input style="ime-mode:disabled" onkeydown="if(event.keyCode==13) event.keyCode=9" onKeyPress="if((event.keyCode||event.keyCode&gt;57)) event.returnValue=false"&gt; ``` 8. **只允许输入英文字符**: - 使用...

Global site tag (gtag.js) - Google Analytics