鍵盤事件keydown、keypress、keyup随筆整理總結（摘抄）

原文1：http://www.cnblogs.com/silence516/archive/2013/01/25/2876611.html

原文2：http://www.cnblogs.com/leolai/archive/2012/08/01/2618386.html

英文輸入法：

事件觸發順序：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 F12、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級。

　　在英文輸入法下，所有浏覽器都遵循以下三個事件：

keydown: 當使用者按下任意鍵時觸發，而且按住不放的話，會重複觸發此事件。

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

keyup: 當使用者釋放鍵時觸發。

　　在中文輸入法下，浏覽器之間則表現得不一緻，主要情況如下：

IE,Chrome,Safari：觸發keydown和keyup， 不觸發keypress。

Firefox：首次按下按鍵時觸發keydown，不觸發keypress。在停止輸入法并改變文本框内容(如按下回車或者空格鍵)後會觸發keyup。

Opera：keydown, keypress和keyup都不觸發。

PS : 隻有在觸發keyup事件才能獲得修改後的文本值。

　　所有元素都支援以上三個事件，一般情況下隻有在文本框時才經常用到。

　　鍵盤事件的觸發過程具體是這樣的: 在使用者按下鍵盤上的一個字元鍵時， 首先會觸發keydown事件，然後是keypress事件，最後是keyup事件。其中，keydown和keypress事件是在文本框發生變化之前 被觸發；而keyup在文本框發生變化之後被觸發。如果使用者按下一個鍵不放，就會重複觸發keydown和keypress事件。在使用者按下一個非字元鍵時，首先觸發keydown事件，然後就是keyup事件。如果使用者按下一個鍵不放，就會重複觸發keydown。

　　當我們監聽這三個事件時，最想得到的資料資訊就是鍵碼(keyCode)和字元編碼(charCode)了。

　　鍵碼(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編碼。是以，要想跨浏覽器獲得字元編碼，代碼如下：

　　這個方法首先檢查charCode屬性是否包含數值(在不支援這個屬性的浏覽器中，值為undefined)，在判斷是否等于0(相容keydown和keyup事件)，如果條件成立，則傳回改值，否則傳回keyCode的值。之前的例子擷取字元編碼如下：

　　在得到了字元編碼後，可以使用String.fromCharCode()将其轉換為實際的字元。

　　鍵盤事件的應用

　　1、 過濾輸入——屏蔽某些字元的輸入

　　達到的效果：隻能輸入數字，輸入其他字元沒有反應。不屏蔽輔助輸入的按鍵，如倒退鍵，方向鍵，複制，粘貼等。

　　原理很簡單：在文本框修改前，擷取字元編碼，判斷合理性，不成立則阻止鍵盤的預設事件。看起來很簡單，但由于浏覽器的相容問題，實作起來還是有點難度。代碼如下：

　　在這個例子的基礎上加以修改和調整，就可以應用于放過或屏蔽任何輸入文本框的字元。

　　很遺憾，還有一個bug未能解決，就是在中文輸入法時keypress事件失效問題。

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

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