Javascript跨瀏覽器處理鍵盤事件keydown,keypress,keyup

　　用戶在使用鍵盤時會觸發鍵盤事件。目前，對鍵盤事件的支持主要遵循的是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則沒有找到解決辦法。

　　路漫漫其修遠兮，吾將上下求索！

文章正文已結束，感謝閱讀。如果本文對您有所幫助，請點擊推薦一下。

如果對本文有何建議或疑問請留言或加群討論，前端開發交流群(75701468)

文章屬於原創，如需轉載請注明文章來源，不勝感激。

文章地址：http://www.cnblogs.com/leolai/archive/2012/08/01/2618386.html

蜂眾網,廣州蜂眾網,瀑布流