键盘事件keydown、keypress、keyup随笔整理总结（摘抄）

原文1：http://www.cnblogs.com/silence516/archive/2013/01/25/2876611.html

原文2：http://www.cnblogs.com/leolai/archive/2012/08/01/2618386.html

---

 

英文输入法：

 

事件触发顺序：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、Scroll Lock、Pause Break、Insert、Delete、 Home、 End、Page Up、Page Down，   F1 through F12，Num Lock、T he Arrow Keys。

 

keypress响应系统功能键总结：

Firefox：支持 Esc、 Enter、 Backspace、 Pause Break、 Insert、Delete、 Home、 End、Page Up、Page Down、 F1 through F12、 T he Arrow Keys

Chrome：支持 Enter

Oprea： 支持 Enter

Safari： 支持 Enter

IE： 支持Esc、 Enter

 

ps:

firefox： 上下左右键会触发kepress.

 

chrome：  上下左右键不会触发kepress.

 

opre a： 上下左右键不会触发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)   

 

标准浏览器中情况有些不同，event对象包含一个keyCode属性和一个charCode属性，keydown和keyup事 件的时候，keyCode表示的就是你具体按的键，charCode为0；当捕捉的是keypress事件时，keyCode为0，charCode指的 是你按下的字符， 鉴于IE和FF中的区别，如果你比较懒的话，建议只使用keydow和keyup事件

】

 

 

/**

本文所涉及浏览器(除ie)都为最新版本

**/

---

 

用户在使用键盘时会触发键盘事件。目前，对键盘事件的支持主要遵循的是DOM0级。

　　在英文输入法下，所有浏览器都遵循以下三个事件：

1. keydown: 当用户按下任意键时触发，而且按住不放的话，会重复触发此事件。
2. keypress: 当用户按下字符键时触发，而且按住不放的话，会重复触发此事件。按下Esc键也会触发这个事件，Safari3.1之前的版本按下非字符键时也触发。
3. keyup: 当用户释放键时触发。

　　在中文输入法下，浏览器之间则表现得不一致，主要情况如下：

1. IE,Chrome,Safari：触发keydown和keyup， 不触发keypress。
2. Firefox：首次按下按键时触发keydown，不触发keypress。在停止输入法并改变文本框内容(如按下回车或者空格键)后会触发keyup。
3. Opera：keydown, keypress和keyup都不触发。
4. 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;

    var clipboardData = e.clipboardData || window.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则没有找到解决办法。

　　路漫漫其修远兮，吾将上下求索！