按键事件_javascript技巧_脚本之家,的兼容性测试
分类:服务器

测量试验结果: 在IE下: >>支持keyCode >>不辅助which和charCode,二者值为undefined 在Firefox下: >>支持keyCode,除作用键外,其余键值始终为0 >>扶植which和charCode,二者的值形似 在Opera下: >>帮忙keyCode和which,二者的值相近>>不帮忙charCode,值为undefined

先是有的:浏览器的按钮事件

请按下狂妄键看测量试验效果:

用js完毕键盘记录,要关爱浏览器的两种按钮事件类型,即keydown,keypress和keyup,它们分别对应onkeydown、onkeypress和onkeyup那八个事件句柄。三个天下第一的开关会生出负有那三种事件,依次是keydown,keypress,然后是开关释放时候的keyup。

type: 当前Key: Decimal: keyCode: 注:在FF下,keyCode始终为0 which: 注:在IE下,which始终为undefined ; 在Opera下,keyCode和charCode二者的值相同按键事件_javascript技巧_脚本之家,的兼容性测试_基础知识_脚本之家。 charCode: 注:在IE、Opera下,charCode始终为undefined ; 在FF下,which和charCode二者的值雷同按键事件_javascript技巧_脚本之家,的兼容性测试_基础知识_脚本之家。 大写: altKey: ctrlKey: shiftKey: repeat:

在这里3种事件类型中,keydown和keyup比较底层,而keypress比较高档。这里所谓的高档是指,当顾客按下shift 1时,keypress是对那些按钮事件进行解析后归来二个可打字与印刷的“!”字符,而keydown和keyup只是记录了shift

[Ctrl A 全选 注:如需引进外界Js需刷新才具进行]

  • 1那么些事件。[1]

而是keypress只可以针对一些方可打字与印刷出来的字符有效,而对于功用按钮,如F1-F12、Backspace、Enter、Escape、PageUP、PageDown和箭头方向等,就不会时有产生keypress事件,不过足以生出keydown和keyup事件。可是在FireFox中,功用按钮是能够发生keypress事件的。

传递给keydown、keypress和keyup事件句柄的事件指标有风度翩翩对通用的属性。假使Alt、Ctrl或Shift和一个开关一同按下,那通过事件的altKey、ctrlKey和shiftKey属性表示,那个属性在FireFox和IE中是通用的。

其次片段:宽容浏览器

大凡涉及浏览器的js,就都要考虑浏览器宽容的主题素材。 近年来常用的浏览器首要有依靠IE和依附Mozilla两大类。马克斯thon是依靠IE内核的,而FireFox和Opera是基于Mozilla内核的。

2.1 事件的最早化

先是须要了然的是怎样初阶化该事件,基本语句如下:

function keyDown(){} document.onkeydown = keyDown;

当浏览器读到那些讲话时,无论按下键盘上的哪位键,都将呼叫KeyDown()函数。

2.2 FireFox和Opera的贯彻方式

FireFox和Opera等程序达成要比IE麻烦,所以这里先描述一下。

keyDown()函数有三个潜藏的变量--日常的,大家选取假名“e”来代表那个变量。

function keyDown

变量e代表爆发击键事件,寻找是哪个键被按下,要选用which这本个性:

e.which

e.which将交由该键的索引值,把索引值转化成该键的字母或数字值的点子需求利用静态函数String.fromCharCode(),如下:

String.fromCharCode

澳门新萄京,把上面的口舌放在一同,我们得以在Fire福克斯中获得被按下的是哪二个键: 复制代码 代码如下: function keyDown { var keycode = e.which; var realkey = String.fromCharCode; alert("按钮码: " keycode " 字符: " realkey); } document.onkeydown = keyDown; 2.3 IE的兑现格局

IE的次序无需e变量,用window.event.keyCode来代替e.which,把键的索引值转变为真正键值方法近似:String.fromCharCode,程序如下: 复制代码 代码如下: function keyDown() { var keycode = event.keyCode; var realkey = String.fromCharCode; alert("开关码: " keycode " 字符: " realkey); } document.onkeydown = keyDown; 2.4 剖断浏览器类型

地点明白了在各类浏览器里是什么样落到实处获取按钮事件目的的章程,那么下边供给看清浏览器类型,这几个法子超多,有比较便利掌握的,也是有很抢眼的不二秘诀,先说平时的不二秘诀:正是行使navigator对象的appName属性,当然也得以用userAgent属性,这里用appName来促成推断浏览器类型,IE和马克斯thon的appName是“Microsoft Internet Explorer” ,而FireFox和Opera的appName是“Netscape”,所以贰个职能比较轻巧的代码如下: 复制代码 代码如下: function keyUp { if(navigator.appName == "Microsoft Internet Explorer") { var keycode = event.keyCode; var realkey = String.fromCharCode; }else { var keycode = e.which; var realkey = String.fromCharCode; } alert("开关码: " keycode

  • " 字符: " realkey); } document.onkeyup = keyUp; 不够长小的点子是[2]: 复制代码 代码如下: function keyUp { var currKey=0,e=e||event; currKey=e.keyCode||e.which||e.charCode; var keyName = String.fromCharCode; alert("开关码: " currKey " 字符: " keyName); } document.onkeyup = keyUp; 下面这种办法比较玄妙,轻松地解释一下: 首先,e=e||event;那句代码是为着进行浏览器事件目的得到的至极。js中那句代码的情致是,假若在FireFox或Opera中,隐蔽的变量e是存在的,那么e||event再次回到e,假如在IE中,隐敝变量e是海市蜃楼,则赶回event。 其次,currKey=e.keyCode||e.which||e.charCode;这句是为了协作浏览器按钮事件指标的按钮码属性,如IE中,唯有keyCode属性,而FireFox中有which和charCode属性,Opera中有keyCode和which属性等。

上述代码只是相称了浏览器,获取了keyup事件指标,轻巧的弹出了按钮码和按钮的字符,不过难点出现了,当你按键时,字符键都以大写的,而按shift键时,呈现的字符很奇异,所以就须要优化一下代码了。

其三片段:代码完结和优化

3.1 开关事件的开关码和字符码

按钮事件的按钮码和字符码贫乏浏览器间的可移植性,对于不一样的浏览器和不一致的案件事件,开关码和字符码的囤积方式都以莫衷一是的,.......在IE中,只有一个keyCode属性,并且它的表明决意于事件类型。对于keydown来讲,keyCode存款和储蓄的是开关码,对于keypress事件来讲,keyCode存款和储蓄的是三个字符码。而IE中从不which和charCode属性,所以which和charCode属性始终为undefined。

FireFox中keyCode始终为0,时间keydown/keyup时,charCode=0,which为开关码。事件keypress时,which和charCode二者的值相近,存款和储蓄了字符码。

在Opera中,keyCode和which二者的值始终相仿,在keydown/keyup事件中,它们存款和储蓄开关码,在keypress时间中,它们存款和储蓄字符码,而charCode未有概念,始终是undefined。

3.2 用keydown/keyup还是keypress

第一有的已经介绍了keydown/keyup和keypress的界别,有一条相比通用的平整,keydown事件对于作用开关来讲是最可行的,而keypress事件对于可打字与印刷按钮来讲是最管用的[3]。

键盘记录主要是照准于可打字与印刷字符和有些机能按钮,所以keypress是首荐,然则正如首先有的涉及的,IE中keypress不帮忙成效开关,所以理应用keydown/keyup事件来扩充填空。

3.3 代码的兑现 总体思路,用keypress事件目的得到开关字符,用keydown事件得到作用字符,如Enter,Backspace等。

代码达成如下所示 复制代码 代码如下:!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

js 按钮记录

请按下任性键查看键盘响应键值: 代码解析: $():依照ID获取dom keypress:实现对字符码的收缴,由于效果开关要用keydown获取,所以在keypress中屏蔽了那些效应开关。 keydown:主如若达成了对效果与利益开关的拿走。 keyup:呈现截获的字符串。

本文由澳门新萄京发布于服务器,转载请注明出处:按键事件_javascript技巧_脚本之家,的兼容性测试

上一篇:澳门新萄京宽度自适应_javascript技巧_脚本之家, 下一篇:没有了
猜你喜欢
热门排行
精彩图文