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

　　使用者在使用鍵盤時會觸發鍵盤事件。目前，對鍵盤事件的支援主要遵循的是DOM0級。

　　在英文IME下，所有瀏覽器都遵循以下三個事件：

1. keydown: 當使用者按下任意鍵時觸發，而且按住不放的話，會重複觸發此事件。
2. keypress: 當使用者按下字元鍵時觸發，而且按住不放的話，會重複觸發此事件。按下Esc鍵也會觸發這個事件，Safari3.1之前的版本按下非字元鍵時也觸發。
3. keyup: 當使用者釋放鍵時觸發。

　　在中文IME下，瀏覽器之間則表現得不一致，主要情況如下：

1. IE,Chrome,Safari：觸發keydown和keyup， 不觸發keypress。
2. Firefox：首次按下按鍵時觸發keydown，不觸發keypress。在停止IME並改變文字框內容(如按下斷行符號或者空格鍵)後會觸發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{            //在中文IME下 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未能解決，就是在中文IME時keypress事件失效問題。

　　針對中文IME的Bug，目前找到的解決辦法是：在文字框加入屬性style="ime-mode:disabled" IE和FF下可禁用IME；在Chrome，Safar下可為文字框添加keydown事件，判斷event.keyCode是否等於299，是的話就阻止keydown預設事件，這種方法對IE也有效。而對於Opera則沒有找到解決辦法。

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