在使用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的兼容性问题
分享到:
相关推荐
三者在事件的响应上还有一点不同,就是onkeydown 、onkeypress事件响应的时候输入的字符并没有被系统接受,而响应onkeyup的时候,输入流已经被系统接受
昨天群里面的朋友问了个比较有意思的问题,keydown,keyup,keypress事件的先后顺序。
onkeypress和onkeydown以及onkeyup的区别onkeypress和onkeydown以及onkeyup的区别onkeypress和onkeydown以及onkeyup的区别
Javascript事件键码查找器 找出javascript的OnKeyDown,OnKeyUp和OnKeyPress事件调用的键码的简单工具。 现场演示: :
浅析OnKeyPress事件和OnKeyDown、OnKeyUp事件
主要介绍了 Android onKeyDown监听返回键无效的解决办法的相关资料,需要的朋友可以参考下
本框里输入的时候要开始计算文本框里面输入了多少字,自然想到了onkeydown事件,然后计算value.length的方法,下面看下具体的代码
用户可以使用两种级别与你的UI进行交互,一种是activity级别,另一种是view级别。在activity级别,Activity类暴露了一些你可以重写的方法。...onKeyDown onKeyUp onMenuItemSelected onMenuOpened 效果图:
用户界面之重写onKeyDown方法源码用户可以使用两种级别与你的UI进行交互,一种是activity级别,另一种是view级别。在activity级别,Activity类暴露了一些你可以重写的方法...onKeyUp onMenuItemSelected onMenuOpened
*" onDblClick="" onKeyDown="" onKeyPress="" onKeyUp="" onMouseDown="" onMouseOut="" onMouseOver="" onMouseUp=""> 将“ onClick="*" ”中的“*”移到“ onMouseOver="" ”中,改为: ...
用户可以使用两种级别与你的UI进行交互,一种是activity级别,另一种是view级别。在activity级别,Activity类暴露了一些你可以重写的方法。...onKeyDown onKeyUp onMenuItemSelected onMenuOpened
个人整理的html所有的鼠标事件及方法:onblur 、onclick 、ondblclick 、onfocus 、onkeydown 、onkeypress 、onkeydown 、onKeyUp 、onmousedown 、onmousemove 、onmouseout 、onmouseover 、onmouseup ...
看似十分简单的需求,可是却碰到不少难题啊。 ... 1. TextBox文本框获得焦点后直接回车,页面会刷新。 经过代码仔细研究,原来是当页面中只有一个文本框控件时,当按回车健页面将刷新。 处理方法:在页面中加入一个...
主要介绍了中文输入法不触发onkeyup事件的解决办法,需要的朋友可以参考下
* Added OnEnter, OnExit, OnKeyDown, OnKeyPress and OnKeyUp events in arc controls * Added OnSetTextFromValue and OnSetValueFromText events in the TsTrackEdit component * Added OnDropDown and ...
键盘事件包含onkeydown、onkeypress和onkeyup这三个事件 事件初始化 function keyDown(){} [removed] = keyDown; //论按下键盘上的哪个键,都将调用KeyDown()函数。 DOM标准下 function keyDown(e) { var ...
input type=”text” name=”” id=”box” onkeyup=”value=value.replace(/[^\d]/g,”)”/> 以上的缺点是,当你正确输入的是一串数字后,想用光标移动到前面修改其中的一个数字,发现移不动,所以就显示了下面...