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找到了源代碼。很簡單的一個邏輯。

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

飯后寫了這篇小文,雖然是很基礎的東西，不過也算是留下一個記號。

解決了問題，記錄下解決的過程,以及方法，對以后的路都是有幫助的。