鍵盤事件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、T he Arrow Keys。

 

keypress響應系統功能鍵總結：

Firefox：支持 Esc、 Enter、 Backspace、 Pause Break、 Insert、Delete、 Home、 End、Page Up、Page Down、 F1 through F12、 T he Arrow Keys

Chrome：支持 Enter

Oprea： 支持 Enter

Safari： 支持 Enter

IE： 支持Esc、 Enter

 

ps:

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

 

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

 

opre a： 上下左右鍵不會觸發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()將其轉換為實際的字符。

　　鍵盤事件的應用

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

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

 

 

input keyup 500ms 延時輸入 事件處理

 

==================input keyup 500ms 延時輸入 事件處理==================
var last;
$(".input").keyup(function(event){//.input為你的輸入框
       last = event.timeStamp;
       //利用event的timeStamp來標記時間，這樣每次的keyup事件都會修改last的值，注意last必需為全局變量
       setTimeout(function(){    //設時延遲0.5s執行
            if(last-event.timeStamp==0)
               //如果時間差為0（也就是你停止輸入0.5s之內都沒有其它的keyup事件發生）則做你想要做的事
              {
                   //做你要做的事情
               }
        },500);
==================input keyup 500ms 延時輸入 事件處理==================