一、鍵盤事件基礎

1、定義

• keydown：按下鍵盤鍵
• keypress：緊接著keydown事件觸發（只有按下字符鍵時觸發）
• keyup：釋放鍵盤鍵

順序為：keydown -> keypress ->keyup

2、示例

<script>
    function keydown(event) {
        console.log('keydown');
    }
    function keypress(event) {
        console.log(event.keyCode);
        console.log(event.charCode);
        console.log('keypress');
    }
    function keyup(event) {
        console.log('keyup');
    }
</script>
<input type="text" onkeydown="keydown()" onkeypress="keypress()" onkeyup="keyup()" />

3、詳解

1）用戶按下鍵盤上的字符鍵時

• 首先會觸發keydown事件
• 然后緊接著觸發keypress事件
• 最后觸發keyup事件
• 如果用戶按下了一個字符鍵不放，就會重復觸發keydown和keypress事件，直到用戶松開該鍵為止

2）當用戶按下非字符鍵時

• 首先會觸發keydown事件
• 然后就觸發keyup事件
• 如果用戶按下了一個非字符鍵不放，就會重復觸發keydown事件，直到用戶松開該鍵為止

3）在keyup 事件中無法阻止瀏覽器默認事件，因為在keypress時，瀏覽器默認行為已經完成，即將文字輸入文本框（盡管這時還沒顯示），這個時候不管是preventDefault還是returnValue = false，都不能阻止在文本框中輸入文字的行為，如要阻止默認行為，必須在keydown或keypress時阻止

<input id="input" value="default" type="text" />
<script>
var input = document.getElementById('input');
input.onkeydown = function() {
    //return false;
    console.log('onkeydown ' + this.value);
}
input.onkeypress = function() {
    //return false;
    console.log('onkeypress ' + this.value);
}
input.onkeyup = function() {
    return false;
    console.log('onkeyup ' + this.value);
}
</script>
//結果為keydown、keypress事件中return false文本框無法輸入文字
//在keyup事件中return false文本框可以輸入文字

4）發生keypress事件意味著按下的鍵會影響到屏幕中文本的顯示，即在所有瀏覽器中，按下能夠插入或刪除字符的鍵都會觸發keypress事件

二、鍵碼和鍵盤事件

• 系統功能鍵 ：Esc、Tab、CapsLk、Shift、Ctrl、Alt、Enter、Backspace、Print Screen、Scroll Lock、Pause Break、Insert、Delete、Home、End、Page Up、Page Down， F1 ~ 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 / Oprea / Safari ：Enter
• IE：Esc、Enter
• 除了 Firefox，其他chrome、oprea、safari、IE 上下左右鍵不會觸發kepress

2、keyCode(鍵碼)、which、charCode(字符編碼)

簡寫記憶：

• keydown: 獲得keyCode， charCode=0
• keyup: 獲得keyCode， charCode=0
• keypress: 字符keyCode=0，獲取charCode值，反之獲取keyCode， charCode=0

詳述：

• event對象包含一個keyCode屬性和一個charCode屬性
• 當捕捉的是keydown和keyup事件時，keyCode表示的就是你具體按的鍵(也稱為virtual keycode)，charCode為0
• 當捕捉的是keypress事件時，keyCode為0，charCode指的是你按下的字符（而 IE 只有一個KeyCode屬性，它指的是你鍵入的字符(character code))
  鑒于 IE 和 FF 中的區別，建議只使用keydow和keyup事件

3、keypress 和 keydown / keyup 的區別

區別簡述

• 1）keypress 對中文輸入法支持不好，無法響應中文輸入
• 2）keypress 無法響應系統功能鍵（如delete，backspace）
• 3）由于前面兩個限制，keydown和keyup對keyCode不敏感

區別詳解

• 對系統功能鍵的響應方面

  • keypress事件不能對系統功能鍵(對中文輸入法不能有效響應)進行正常的響應
  • keydown和keyup均可以對系統功能鍵進行有效的攔截，但事件截獲的位置不同

• keyCode對字母的大小寫敏感程度

• keypress事件的keyCode對字母的大小寫敏感

• keydown、keyup事件不敏感

• 主附鍵盤的數字鍵敏感程度

• keypress事件的which值無法區分主鍵盤上的數字鍵和附鍵盤數字鍵的

• keydown、keyup事件的which值對主附鍵盤的數字鍵 敏感

4、需要注意的地方

• 1）英文輸入法

• 所有瀏覽器都支持這三個事件

• 2）中文輸入法（瀏覽器之間表現得不太一致）

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

• Firefox：

  • 首次按下時觸發keydown，不觸發keypress
  • 在停止輸入并改變文本框內容(如按下回車或者空格鍵)后會觸發keyup（只有在觸發keyup事件才能獲得修改后的文本值）

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

• 3）大小寫

• 大寫：keydown、keypress(字母，主鍵盤數字、回車)、keyup的which值相等

• 小寫：kepress獲取的which不同于keydown、keyup

5、keyCode對照表

相關文章推薦：
JS鍵盤事件
鍵盤事件keydown，keypress，keyup
鍵盤事件keydown,keypress,keyup區別
鍵盤事件keydown、keypress、keyup隨筆整理總結
Javascript跨瀏覽器處理鍵盤事件keydown,keypress,keyup