鍵盤事件keydown、keypress、keyup隨筆整理總結

英文輸入法：

 

事件觸發順序：keydown - > keypress - > keyup

 

中文輸入法：

 

firfox：輸入觸發keydown，回車確認輸入觸發keyup

chrome：輸入觸發keydown、keyup，回車確認輸入只觸發keydown

IE：輸入觸發keydown、keyup，回車確認輸入觸發keydown，keyup

Safari：輸入觸發keydown、keyup，回車確認輸入觸發keydown，keyup

opera：輸入觸發keydown、keyup，回車確認輸入觸發keydown，keyup

 

keypress事件不能對系統功能鍵(例如：後退、刪除等，其中對中文輸入法不能有效響應)進行正常的響應，

keydown和keyup都可以對系統功能鍵進行有效的攔截，但事件截獲的位置不一樣。

 

鍵盤中的鍵分爲字符(可打印)鍵和功能鍵(不可打印)， 系統功能鍵包括以下：

Esc、Tab、Caps Lock、Shift、Ctrl、Alt、Enter、Backspace、Print Screen、Scroll Lock、Pause Break、Insert、Delete、Home、End、Page Up、Page Down， F1 through F12，Num Lock、The Arrow Keys。

 

keypress響應系統功能鍵總結：

Firefox：支持 Esc、Enter、Backspace、Pause Break、Insert、Delete、Home、End、Page Up、Page Down、F1 through F十二、The Arrow Keys

Chrome：支持Enter

Oprea：支持Enter

Safari：支持Enter

IE：支持Esc、Enter

 

ps:

firefox：上下左右鍵會觸發kepress.

 

chrome： 上下左右鍵不會觸發kepress.

 

oprea：上下左右鍵不會觸發kepress.

 

safari：上下左右鍵不會觸發kepress.

 

IE：上下左右鍵不會觸發kepress.

 

================================================================================

keyCode(鍵碼), which, charCode(字符編碼)

 

keydown: 得到keyCode， charCode=0

 

keypress: 字符（英文區分大小寫+數字  / * , .  ...等非功能鍵），keyCode=0 ，獲取charCode值， 反之獲取keyCode， charCode=0

 

keyup: 得到keyCode， charCode=0

 

jquery 中 event.which = original.charCode != null ? original.charCode : original.keyCode;

 

 

總結：回車、上下左右、等功能鍵keydown、keypress、keyup都獲取keyCode，而且值相等。

 

 

開啓大寫狀況，keydown、keypress(字母，主鍵盤數字、回車)、keyup，which值相等，小寫kepress獲取的which不一樣於keypress、keyup。

 

keypress事件的keyCode對字母的大小寫敏感，而keydown、keyup事件不敏感

keypress事件的which值沒法區分主鍵盤上的數字鍵和附鍵盤數字鍵的，而keydown、keyup的which值對主附鍵盤的數字鍵敏感。

【

IE(ie9如下)只有一個屬性KeyCode屬性，當爲keydown和keyup 事件是，keycode屬性表示你具體按下的鍵(也稱爲virtual keycode)，當捕捉的是keypress事件時keyCode屬性指的是你鍵入的字符(character code)   

 

標準瀏覽器中狀況有些不一樣，event對象包含一個keyCode屬性和一個charCode屬性，keydown和keyup事 件的時候，keyCode表示的就是你具體按的鍵，charCode爲0；當捕捉的是keypress事件時，keyCode爲0，charCode指的 是你按下的字符，鑑於IE和FF中的區別，若是你比較懶的話，建議只使用keydow和keyup事件

】

 

 

/**

本文所涉及瀏覽器(除ie)都爲最新版本

**/

---

 

用戶在使用鍵盤時會觸發鍵盤事件。目前，對鍵盤事件的支持主要遵循的是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()將其轉換爲實際的字符。

　　鍵盤事件的應用

　　一、 過濾輸入——屏蔽某些字符的輸入

　　達到的效果：只能輸入數字，輸入其餘字符沒有反應。不屏蔽輔助輸入的按鍵，如退格鍵，方向鍵，複製，粘貼等。

　　原理很簡單：在文本框修改前，獲取字符編碼，判斷合理性，不成立則阻止鍵盤的默認事件。看起來很簡單，但因爲瀏覽器的兼容問題，實現起來仍是有點難度。代碼以下：

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則沒有找到解決辦法。