
原始文件1:
原始2:
英文输入法:
事件触发顺序: keydown-> keypress-> keyup
中文输入法:
firfox: 输入触发键按下,按Enter确认输入触发键
chrome: 输入触发键盘按下,按下,按Enter确认输入仅触发键盘按下
IE: 输入以触发键盘按下,按下,按Enter确认输入以触发键盘按下,按下
Safari: 输入以触发键盘按下,按下,按Enter确认输入触发键盘按下,按下
操作: 输入触发键盘按下键,按Enter确认输入触发键盘按下键
keypress事件无法正常响应系统功能键(例如: 后退,删除等,它们无法有效响应中文输入法),
Keydown和keyup可以有效地拦截系统功能键,但是事件拦截的位置不同.
键盘上的键分为字符(可打印)键和功能键(不可打印). 系统功能键包括以下内容:
Esc,Tab,Caps Lock,Shift,Ctrl,Alt,Enter,Backspace,打印屏幕,Scroll Lock,暂停符,插入,删除,首页,结束,Page Up,Page Down,F1至F12,Num Lock,方向键.

按键响应系统功能键概述:
Firefox: 支持Esc键,Enter键,退格键,暂停符,插入键,删除键,Home键,End键,Page Up键,Page Down键,F1至F12键,箭头键
Chrome: 支持Enter
Oprea: 支持Enter
Safari: 支持Enter
IE: 支持Esc,输入
ps:
firefox: 向上jquery keypress 方向键,向下,向左和向右键将触发kepress.
chrome: 向上,向下,向左和向右键不会触发kepress.
oprea: 向上,向下,向左和向右键不会触发kepress.
野生动物园: 向上,向下,向左和向右键不会触发kepress.
IE: 向上,向下,向左和向右键不会触发kepress.
================================================ ================================
keyCode(密钥代码),其中charCode(字符代码)
keydown: 获取keyCode,charCode = 0
keypress: 字符(区分大小写的英文字母+数字/ *,....和其他非功能键),keyCode = 0,获取charCode值,否则获取keyCode,charCode = 0
keyup: 获取keyCode,charCode = 0
event.which = original.charCode!= jQuery中为null? original.charCode: original.keyCode;
摘要: 功能键keydown,keypress和keyup(例如enter,up,down,left和right)都获得keyCode,并且值相等.
启用大写,按键按下,按键(字母,主键盘编号,回车键),按键和具有相同值的按键. 小写的kepress所获得的不同于按键和键盘.
keypress事件的keyCode对字母大小写敏感,而keydown和keyup事件则不敏感
keypress事件的哪个值无法区分主键盘上的数字键和连接的键盘上的数字键,而keydown和keyup的哪个值对连接的键盘上的数字键敏感.
[
IE(在ie9以下)仅具有一个属性KeyCode属性. 当是keydown和keyup事件时jquery keypress 方向键,keycode属性表示您按下的键(也称为虚拟键码). 捕获keypress事件时,keyCode属性指的是您键入的字符(字符代码)
标准浏览器中的情况有所不同. 事件对象包含一个keyCode属性和一个charCode属性. 对于keydown和keyup事件,keyCode表示您按下的键,charCode为0;否则为0. 当捕获是按键事件时,KeyCode为0,charCode表示您按下的字符. 鉴于IE和FF之间的差异,如果您很懒,建议仅使用keydow和keyup事件
]
/ **
本文涉及的浏览器(ie除外)都是最新版本

** /
键盘事件将在用户使用键盘时触发. 当前,对键盘事件的支持主要遵循DOM0级别.
在英语输入法下,所有浏览器都遵循以下三个事件:
keydown: 当用户按下任意键时触发,如果按住该键,将重复触发此事件. 按键: 当用户按下字符键时触发,如果按住该键,将重复触发此事件. 按下Esc键也会触发此事件,并且在Safari3.1之前的版本中按下非字符键也会触发此事件. keyup: 在用户释放键时触发.
在中文输入法下,浏览器之间的性能不一致. 主要情况如下:
IE,Chrome,Safari: 触发按键和按键,而不是按键. Firefox: 首次按下按键时会触发Keydown,但不会触发按键. 停止输入法并更改文本框的内容(例如按Enter或空格键)后,将触发键入命令. Opera: 不会触发按键,按键和按键. PS: 只有在触发keyup事件时,才能获取修改后的文本值.
所有元素都支持上述三个事件,通常仅在文本框中使用.
键盘事件的触发过程如下: 当用户按下键盘上的字符键时,首先触发keydown事件,然后触发keypress事件,最后触发keyup事件. 其中,keydown和keypress事件是在文本框更改之前触发的. 并在文本框更改后触发键入. 如果用户按下某个键而不放开它,则将反复触发keydown和keypress事件. 当用户按下非字符键时,首先触发keydown事件,然后触发keyup事件. 如果用户按下某个键而不放开它,则将反复触发该键按下.
当我们听这三个事件时,最需要的数据信息是键码(keyCode)和字符码(charCode).
KeyCode(keyCode)
发生keydown和keyup事件时,事件对象的keyCode属性将包含一个代码,并且keyCode属性的值是对应于小写字母或数字的ASCII代码(单击此处查看ASCII代码表). 可以在程序中传递以下代码以获取keyCode值:
//EventUtil是一个封装的对象,用来处理跨浏览器事件 var textbox = document.getElementById('myText'); EventUtil.addHandler(textbox,'keydown',function(event){ event = event || window.event; alert(event.keyCode); });
以下是按键事件和按键事件的一些特殊情况:
CharCode(charCode)

发生按键事件时,FF,Chrome和Safari的事件对象均支持charCode属性. charCode属性的值是与按下的字符键相对应的ASCII码. 当按下一个非字符键或按下一个键并且keyup事件的值为0时,使用此属性. IE和Opera将字符键的ASCII码存储在keyCode中. 因此,要获得跨浏览器的字符编码,代码如下:

//获取字符编码 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属性是否包含一个值(在不支持此属性的浏览器中,该值未定义),然后判断它是否等于0(与keydown和keyup事件兼容),如果条件为true,则返回更改后的值. 否则,返回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; var clipboardData = e.clipboardData || window.clipboardData; if(!/^\d*$/.test(clipboardData.getData('text'))){ //阻止默认事件 if(e.preventDefault){ e.preventDefault(); }else{ e.returnValue = false; } } });

基于此示例的修改和调整可以应用于丢失或阻止在文本框中输入的任何字符.
不幸的是,仍然存在一个尚未解决的错误,即在中文输入法中按键事件无效.
对于中文输入法错误,到目前为止找到的解决方案是: 在文本框中添加属性style =“ ime-mode: disabled”. 可以在IE和FF下禁用输入法. 在Chrome和Safar下,可以在文本框中添加Keydown事件,判断event.keyCode是否等于299,如果是,则停止keydown默认事件. 此方法对IE也有效. 对于Opera,找不到解决方案.
道路漫长,我将上下搜索!
本文来自电脑杂谈,转载请注明本文网址:
http://www.pc-fly.com/a/jisuanjixue/article-288403-1.html
好看好看#宋茜#
说下感受吧