JS keydown 鍵盤事件

簡介

關於鍵盤事件，分為三種，其中keydown事件發生在鍵盤的鍵被按下的時候，接下來觸發keypress事件，最后在按鍵被釋放時觸發keyup事件。

用法如下

document.addEventListener('keyup', function (e) {});
document.addEventListener('keypress', function (e) {});
document.addEventListener('keyup', function (e) {});

特殊按鍵如PrScrn鍵是不會被捕獲到的，其他的鍵盤事件請注意：

keydown、keyup事件

• keydown觸發后，不一定立即觸發keyup，可以按下不松手持續一段時間得到多個keydown事件，或者當keydown按下后，拖動鼠標，那么將不會觸發keyup事件。
• keydown和keyup區分小鍵盤和主鍵盤的數字字符，這兩種輸入得到的keyCode是不同的。
• keydown和keyup不區分單個字符大小寫情況，這兩種輸入得到的keyCode是相同的。

keypress事件

• KeyPress主要用來捕獲數字(注意：包括Shift+數字的符號)、字母（注意：包括大小寫）、小鍵盤等除了F1-12、SHIFT、Alt、Ctrl、Insert、Home、PgUp、Delete、End、PgDn、ScrollLock、Pause、NumLock、{菜單鍵}、{開始鍵}和方向鍵外的ANSI字符
• KeyPress 可以捕獲單個字符的大小寫，得到的keyCode值是符合ascii碼表里對應的大小寫字母值。
• KeyPress 不區分小鍵盤和主鍵盤的數字字符，得到的keyCode相同。

keydown和keyup的keyCode說明

• backspace：8
• tab：9
• enter：13
• shift：16
• ctrl：17
• alt：18
• pause/break：19
• caps lock：20
• escape：27
• page up：33
• Space：32
• page down：34
• end：35
• home：36
• arrow left：37
• arrow up：38
• arrow right：39
• arrow down：40
• insert：45
• delete：46
• 0：48
• 1：49
• 2：50
• 3：51
• 4：52
• 5：53
• 6：54
• 7：55
• 8：56
• 9：57
• a：65
• b：66
• c：67
• d：68
• e：69
• f：70
• g：71
• h：72
• i：73
• j：74
• k：75
• l：76
• m：77
• n：78
• o：79
• p：80
• q：81
• r：82
• s：83
• t：84
• u：85
• v：86
• w：87
• x：88
• y：89
• z：90
• left window key：91
• right window key：92
• select key：93
• numpad 0：96
• numpad 1：97
• numpad 2：98
• numpad 3：99
• numpad 4：100
• numpad 5：101
• numpad 6：102
• numpad 7：103
• numpad 8：104
• numpad 9：105
• multiply：106
• add：107
• subtract：109
• decimal point：110
• divide：111
• f1：112
• f2：113
• f3：114
• f4：115
• f5：116
• f6：117
• f7：118
• f8：119
• f9：120
• f10：121

注意keypress的按鍵keyCode和ascii碼表值相同。

捕獲正常的字母和數字

如果不希望匹配到如ctrl+c這樣的組合鍵里的c，則需要使用keypress事件。

document.addEventListener('keypress', function (e) {
    if (e.keyCode >= 48 && e.keyCode <= 57 ||
        e.keyCode >= 65 && e.keyCode <= 90 ||
        e.keyCode >= 97 && e.keyCode <= 122) {

        console.log(e.keyCode);    
    }
});

捕獲ctrl+c組合鍵

捕獲組合鍵注意mac和windows的差異，控制鍵有以下四種，對應鍵盤事件event的以下四個屬性

• ctrlKey --- Ctrl鍵
• shiftKey --- Shift鍵
• altKey --- Alt鍵
• metaKey --- command鍵（Mac下），此屬性只能在mac中需要keydown事件才能得到正確的值。

document.addEventListener('keydown', function (e) {
    if (e.keyCode === 67 && (e.ctrlKey || e.metaKey)) {
        console.log('ctrl + c');
    }
}, false);

參考

http://www.cnblogs.com/manongxiaobing/archive/2012/11/05/2755412.html