keydown,keypress,keyup浏览器兼容和获取keyCode

浏览器使用键盘时遵循的条件。目前，对键盘事件的支持主要遵循的是DOM0级。

1. keypress: 当输入字符键时触发，但现在有些浏览器按下功能键是也能触发,而且按住不放的话,会重复触发此事件。
2. keydown: 当用户按下任意键时触发，而且按住不放的话，会重复触发此事件。
3. keyup: 当用户释放时触发。

不同浏览器触发keypress事件的情况

1. key	Internet Explorer	Firefox	Opera	Google Chrome and Safari
   Alphanumeric, +, -, *, /, ENTER, SPACE	yes	yes	yes	yes
   ALT, CTRL, META, SHIFT	no	no	yes	no
   ESC	yes	yes	yes	no
   Fn, cursor left, up, right and down keys, Insert, Delete, Home, End, Page Up, Page Down, Backspace	no	yes	yes	no

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

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与keyCode的区别：keyCode属性的值与ASCII码中对应小写字母或者数字的编码相同。因此，数字键7的keyCode值为55，而字母A健的keyCode值为65——与Shift键的状态无关；
• 不同浏览器对得到keyCode 和charCode的兼容性不同
• 在IE下： 
  
  •  支持keyCode 
  • 不支持which和charCode,二者值为 undefined 
  
  在Firefox下： 
  
  •  支持keyCode，除功能键外，其他键值始终为 0 
  •  支持which和charCode，二者的值相同 
  在Opera下： 
• •  支持keyCode和which，二者的值相同 
  •  不支持charCode，值为 undefined
   
  
• 键码(keyCode)
• 在发生keydown和keyup事件时，event对象的keyCode属性会包含一个代码，keyCode属性的值就是小写字母或数字对应的ASCII码，在程序中可通过如下代码来获得keyCode值：

• 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事件意味着按下的键会影响到屏幕中文本的显示。在发生keypress事件时，FF、Chrome和Safari的event对象都支持一个charCode属性，这个属性只有发生在keypress事件时才发生。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则没有找到解决办法。