首页 键盘事件keydown、keypress、keyup随笔整理总结

键盘事件keydown、keypress、keyup随笔整理总结

举报
开通vip

键盘事件keydown、keypress、keyup随笔整理总结键盘事件keydown、keypress、keyup随笔整理总结 英文输入法: 事件触发顺序:keydown - > keypress - > keyup 中文输入法: firfox:输入触发keydown,回车确认输入触发keyup chrome:输入触发keydown、keyup,回车确认输入只触发keydown IE:输入触发keydown、keyup,回车确认输入触发keydown,keyup Safari:输入触发keydown、keyup,回车确认输入触发keydown,keyup opera...

键盘事件keydown、keypress、keyup随笔整理总结
键盘事件keydown、keypress、keyup随笔整理总结 英文输入法: 事件触发顺序:keydown - > keypress - > keyup 中文输入法: firfox:输入触发keydown,回车确认输入触发keyup chrome:输入触发keydown、keyup,回车确认输入只触发keydown IE:输入触发keydown、keyup,回车确认输入触发keydown,keyup Safari:输入触发keydown、keyup,回车确认输入触发keydown,keyup opera:输入触发keydown、keyup,回车确认输入触发keydown,keyup keypress事件不能对系统功能键(例如:后退、删除等,其中对中文输入法不能有效响应)进行正常的响应, keydown和keyup均可以对系统功能键进行有效的拦截,但事件截获的位置不同。 键盘中的键分为字符(可打印)键和功能键(不可打印),系统功能键包括如下: Esc、Tab、Caps Lock、Shift、Ctrl、Alt、Enter、Backspace、Print Screen、 Break、Insert、Delete、Home、End、Page Up、Page Down, F1 Scroll Lock、Pause through F12,Num Lock、The Arrow Keys。 keypress响应系统功能键总结: Firefox:支持 Esc、Enter、Backspace、Pause Break、Insert、Delete、Home、End、Page Up、Page Down、F1 through F12、The Arrow Keys Chrome:支持Enter Oprea:支持Enter Safari:支持Enter IE:支持Esc、Enter ps: firefox:上下左右键会触发kepress. chrome: 上下左右键不会触发kepress. oprea:上下左右键不会触发kepress. safari:上下左右键不会触发kepress. IE:上下左右键不会触发kepress. ================================================================================ keyCode(键码), which, charCode(字符编码) keydown: 获得keyCode, charCode=0 keypress: 字符(英文区分大小写+数字 / * , . ...等非功能键),keyCode=0 ,获取charCode值, 反之获取keyCode, charCode=0 keyup: 获得keyCode, charCode=0 jquery 中 event.which = original.charCode != null ? original.charCode : original.keyCode; 总结:回车、上下左右、等功能键keydown、keypress、keyup都获取keyCode,并且值相等。 开启大写情况,keydown、keypress(字母,主键盘数字、回车)、keyup,which值相等,小写kepress获取的which不同于keypress、keyup。 keypress事件的keyCode对字母的大小写敏感,而keydown、keyup事件不敏感 keypress事件的which值无法区分主键盘上的数字键和附键盘数字键的,而keydown、keyup的which值对主附键盘的数字键敏感。 【 IE(ie9以下)只有一个属性KeyCode属性,当为keydown和keyup 事件是,keycode属性表示你具体按下的键(也称为virtual keycode),当捕捉的是keypress事件时keyCode属性指的是你键入的字符(character code) 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 浏览器中情况有些不同,event对象包含一个keyCode属性和一个charCode属性,keydown和keyup事 件的时候,keyCode表示的就是你具体按的键,charCode为0;当捕捉的是keypress事件时,keyCode为0,charCode指的 是你按下的字符,鉴于IE和FF中的区别,如果你比较懒的话,建议只使用keydow和keyup事件 】 /** 本文所涉及浏览器(除ie)都为最新版本 **/ 用户在使用键盘时会触发键盘事件。目前,对键盘事件的支持主要遵循的是DOM0级。 在英文输入法下,所有浏览器都遵循以下三个事件: keydown: 当用户按下任意键时触发,而且按住不放的话,会重复触发此事件。 keypress: 当用户按下字符键时触发,而且按住不放的话,会重复触发此事件。按下Esc键也会触发这个事件,Safari3.1之前的版本按下非字符键时也触发。 keyup: 当用户释放键时触发。 在中文输入法下,浏览器之间则表现得不一致,主要情况如下: IE,Chrome,Safari:触发keydown和keyup, 不触发keypress。 Firefox:首次按下按键时触发keydown,不触发keypress。在停止输入法并改变文本框内容(如按下回车或者空格键)后会触发keyup。 Opera:keydown, keypress和keyup都不触发。 PS : 只有在触发keyup事件才能获得修改后的文本值。 所有元素都支持以上三个事件,一般情况下只有在文本框时才经常用到。 键盘事件的触发过程具体是这样的: 在用户按下键盘上的一个字符键时, 首先会触发keydown事件,然后是keypress事件,最后是keyup事件。其中,keydown和keypress事件是在文本框发生变化之前 被触发;而keyup在文本框发生变化之后被触发。如果用户按下一个键不放,就会重复触发keydown和keypress事件。在用户按下一个非字符键时,首先触发keydown事件,然后就是keyup事件。如果用户按下一个键不放,就会重复触发keydown。 当我们监听这三个事件时,最想得到的数据信息就是键码(keyCode)和字符编码(charCode)了。 键码(keyCode) 在发生keydown和keyup事件时,event对象的keyCode属性会包含一个代码,keyCode属性的值就是小写字母或数字对应的ASCII码(点击这里查看ASCII码表),在程序中可通过如下代码来获得keyCode值: //EventUtil是一个封装的对象,用来处理跨浏览器事件 var textbox = document.getElementById('myText'); EventUtil.addHandler(textbox,'keydown',function(event){ event = event || window.event; alert(event.keyCode); }); 以下是keydown和keypress事件存在的一些特殊情况: 在FF和Opera中,按分号键时keyCode值为59,但IE,Chrome和Safari则返回186 在Safari3之前的版本中,上、下、左、右箭头和上翻(PageUp)、下翻(PageDown)键返回大于63000的值。 字符编码(charCode) 在发生keypress事件时,FF、Chrome和Safari的event对象都支持一个charCode属性,charCode属性的值 就是按下的字符键对应的ASCII编码,这个属性在按下非字符键或发生keydown和keyup事件时值为0;IE和Opera则是在keyCode中 保存字符键的ASCII编码。所以,要想跨浏览器获得字符编码,代码如下: //获取字符编码 var getCharCode = function(event){ var charcode = event.charCode; if(typeof charcode == "number" && charcode != 0){ return charcode; }else{ //在中文输入法下 keyCode == 229 || keyCode == 197(Opera) return event.keyCode; } }; 在不支持这个属性的浏览器 这个方法首先检查charCode属性是否包含数值( 中,值为undefined),在判断是否等于0(兼容keydown和keyup事件),如果条件成立,则返回改值,否则返回keyCode的值。之前的例子获取字符编码如下: var textbox = document.getElementById('myText'); EventUtil.addHandler(textbox,'keydown',function(event){ event = event || window.event; alert(getCharCode(event)); }); 在得到了字符编码后,可以使用String.fromCharCode()将其转换为实际的字符。 键盘事件的应用 1、 过滤输入——屏蔽某些字符的输入 达到的效果:只能输入数字,输入其他字符没有反应。不屏蔽辅助输入的按键,如退格键,方向键,复制,粘贴等。 原理很简单:在文本框修改前,获取字符编码,判断合理性,不成立则阻止键盘的默认事件。看起来很简单,但由于浏览器的兼容问题,实现起来还是有点难度。代码如下: var handler= function(e){ e = e || window.event; var charcode = typeof e.charCode == 'number' ? e.charCode : e.keyCode; var re = /\d/; //FF和safari3.1以前版本会对方向键、退格键、删除键触发keypress事件 charcode > 9 可修复此Bug //!e.ctrlKey 不屏蔽Ctrl+C,Ctrl+V if(!re.test(String.fromCharCode(charcode)) && charcode > 9 && !e.ctrlKey){ //阻止默认事件 if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } } }; EventUtil.addHandler(textbox,'keypress',handler); //监听粘贴事件 EventUtil.addHandler(textbox,'paste',function(e){ e = e || window.event; = e.clipboardData || window.clipboardData; var clipboardData if(!/^\d*$/.test(clipboardData.getData('text'))){ //阻止默认事件 if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } } }); 在这个例子的基础上加以修改和调整,就可以应用于放过或屏蔽任何输入文本框的字符。 很遗憾,还有一个bug未能解决,就是在中文输入法时keypress事件失效问题。 针对中文输入法的Bug,目前找到的解决办法是:在文本框加入属性style="ime-mode:disabled" IE和FF下可禁用输入法;在Chrome,Safar下可为文本框添加keydown事件,判断event.keyCode是否等于299,是的话就阻 止keydown默认事件,这种方法对IE也有效。而对于Opera则没有找到解决办法。 路漫漫其修远兮,吾将上下求索~
本文档为【键盘事件keydown、keypress、keyup随笔整理总结】,请使用软件OFFICE或WPS软件打开。作品中的文字与图均可以修改和编辑, 图片更改请在作品中右键图片并更换,文字修改请直接点击文字进行修改,也可以新增和删除文档中的内容。
该文档来自用户分享,如有侵权行为请发邮件ishare@vip.sina.com联系网站客服,我们会及时删除。
[版权声明] 本站所有资料为用户分享产生,若发现您的权利被侵害,请联系客服邮件isharekefu@iask.cn,我们尽快处理。
本作品所展示的图片、画像、字体、音乐的版权可能需版权方额外授权,请谨慎使用。
网站提供的党政主题相关内容(国旗、国徽、党徽..)目的在于配合国家政策宣传,仅限个人学习分享使用,禁止用于任何广告和商用目的。
下载需要: 免费 已有0 人下载
最新资料
资料动态
专题动态
is_471618
暂无简介~
格式:doc
大小:23KB
软件:Word
页数:0
分类:
上传时间:2017-10-21
浏览量:16