Event.KeyCode,Event.Which

今天去修改一个老系统的时候,解决了一个按钮触发在不同浏览器上兼容的问题。就顺手差了一些资料,不要知其然不知其所以然。

先介绍几个简单的

KeyDown事件:

当浏览器读到这个语句时,无论按下键盘上的哪个键,都将呼叫KeyDown()函数

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

IE下读取键盘按键

keycode = event.keyCode;//
String.fromCharCode(event.keyCode)//索引转换。

FF下读取键盘按键

keycode = e.which;
String.fromCharCode(e.which);// 索引转换。

 so可以看到不同浏览器下对键盘按钮的读取的方式不同,

ie是enent.keyCode,而FF是event.which.

------------------------------------------------------------------------华丽的分割线------------------------------------------------------------------------------------------------------------------

这里.我的问题已经解决,判断一下浏览器就再执行不同的方法就可以了。

一般青年解决方案

通过navigator的appName判断.

function keyUp(e) { 
   if(navigator.appName == "Microsoft Internet Explorer")
   {
     var keycode = event.keyCode; 
     var realkey = String.fromCharCode(event.keyCode); 
   }else
   {
      var keycode = e.which; 
       var realkey = String.fromCharCode(e.which); 
   }
   alert("按键码: " + keycode + " 字符: " + realkey);
 }
document.onkeyup = keyUp;

 文艺青年解决方案

function keyUp(e) {
            var currKey = 0, e = e || event;
            currKey = e.keyCode || e.which || e.charCode;
            var keyName = String.fromCharCode(currKey);
            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属性等。

-----------------------------------------------------------------我又来分割了----------------------------------------------------------------------


问题已经解决,很基础的问题,我顺手用jquery试了一下

网上找了一段代码是这样的。

<script language="javascript">
       $(function() {
           $("#input1").keydown(function (event) {
               $("#div1").html("Key: " + event.keyCode);
           }); 
       
       });
      
   </script>

 



 

 

 

 

 

 

 

 

 

这是ie中的效果  

这是火狐中的效果。

可以看到Jquery是可以解决这个兼容问题的。

我留意了上面的关键字:

 event.keyCode

 我换了一下 ,换成which,一样是可以的。

所以大概可以得出结论,Jquery已经解决了这个问题。

为了刨根问题,打开了Jquery的API文档,查询了资料出现了这样一句话

大概的意思是~在1.1.3版本.就加入了event.which这个属性。用来规范keycode和charcode.

顺便在jquery找到了源代码。很简单的一个逻辑。

---------------------------------------------------------------分割--------------------------------------------------------------------------------------------

饭后写了这篇小文,虽然是很基础的东西,不过也算是留下一个记号。

解决了问题,记录下解决的过程,以及方法,对以后的路都是有帮助的。

posted @ 2012-02-17 12:36  wilsonChan  阅读(2595)  评论(3编辑  收藏  举报