当前位置:首页> 编程笔记> JS/JQuery
关键字
文章内容
JS监听监键盘动作(兼容浏览器)
 
 
修改时间:[2012/05/27 20:37]    阅读次数:[973]    发表者:[起缘]
 
    凡是涉及浏览器的js,就都要考虑浏览器兼容的问题。
   目前常用的浏览器主要有基于IE和基于Mozilla两大类。Maxthon是基于IE内核的,而FireFox和Opera是基于Mozilla内核的。

1 事件的初始化

首先需要了解的是如何初始化该事件,基本语句如下:

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

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

2 FireFox和Opera的实现方法

    FireFox和Opera等程序实现要比IE麻烦,所以这里先描述一下。

keyDown()函数有一个隐藏的变量–一般的,我们使用字母“e”来表示这个变量。

    function keyDown(e)

变量e表示发生击键事件,寻找是哪个键被按下,要使用which这个属性:

    e.which

e.which将给出该键的索引值,把索引值转化成该键的字母或数字值的方法需要用到静态函数String.fromCharCode(),如下:

    String.fromCharCode(e.which)

把上面的语句放在一起,我们可以在FireFox中得到被按下的是哪一个键:

    function keyDown(e) {
       var keycode = e.which;
       var realkey = String.fromCharCode(e.which);
       alert(”按键码: ” + keycode + ” 字符: ” + realkey);
   }
   document.onkeydown = keyDown;

3 IE的实现方法

    IE的程序不需要e变量,用window.event.keyCode来代替e.which,把键的索引值转化为真实键值方法类似:String.fromCharCode(event.keyCode),程序如下:

    function keyDown() {
       var keycode = event.keyCode;
       var realkey = String.fromCharCode(event.keyCode);
       alert(”按键码: ” + keycode + ” 字符: ” + realkey);
   }
   document.onkeydown = keyDown;

4 判断浏览器类型

    上面了解了在各种浏览器里是如何实现获取按键事件对象的方法,那么下面需要判断浏览器类型,这个方法很多,有比较方便理解的,也有很巧妙的办法,先说一般  的方法:就是利用navigator对象的appName属性,当然也可以用userAgent属性,这里用appName来实现判断浏览器类型,IE和 Maxthon的appName是“Microsoft Internet Explorer” ,而FireFox和Opera的appName是“Netscape”,所以一个功能比较简单的代码如下:

    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;

 

比较简洁的方法是[2]:

   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属性等。

    上述代码只是兼容了浏览器,获取了keyup事件对象,简单的弹出了按键码和按键的字符,但是问题出现了,当你按键时,字符键都是大写的,而按shift键时,显示的字符很奇怪,所以就需要优化一下代码了。

 
 
 
 

威尼斯人唯一官网