摘要：級(jí)事件為鍵盤事件制訂了規(guī)范鍵盤事件按下任意鍵觸發(fā)，如果按住不放，會(huì)重復(fù)觸發(fā)按下字符鍵觸發(fā)，如果按住不放，會(huì)重復(fù)觸發(fā)按下鍵也會(huì)觸發(fā)釋放鍵盤上的鍵時(shí)觸發(fā)文本事件在文本插入文本框之前會(huì)觸發(fā)事件。

“DOM3級(jí)事件”為鍵盤事件制訂了規(guī)范：

鍵盤事件：

keydown：按下任意鍵觸發(fā)，如果按住不放，會(huì)重復(fù)觸發(fā)；

keypress：按下字符鍵觸發(fā)，如果按住不放，會(huì)重復(fù)觸發(fā)；按下Esc鍵也會(huì)觸發(fā)；

keyup：釋放鍵盤上的鍵時(shí)觸發(fā)；

文本事件：

textInput：在文本插入文本框之前會(huì)觸發(fā)textInput事件。

程序：

當(dāng)用戶按下一個(gè)鍵盤上的字符鍵：keydown --> keypress --> keyup；
當(dāng)用戶按下一個(gè)鍵盤上的非字符鍵：keydown --> keyup；

發(fā)聲keydown和keyup事件，event對(duì)象的keyCode屬性包含一個(gè)代碼，與鍵盤上一個(gè)特定的鍵對(duì)應(yīng)。對(duì)數(shù)字字母字符鍵，keyCode屬性的值與ASCⅡ碼中對(duì)應(yīng)小寫字母或數(shù)字的編碼相同。

鍵碼如下：

字母和數(shù)字鍵的鍵碼值(keyCode)
A    65    J    74    S    83    1    49
B    66    K    75    T    84    2    50
C    67    L    76    U    85    3    51
D    68    M    77    V    86    4    52
E    69    N    78    W    87    5    53
F    70    O    79    X    88    6    54
G    71    P    80    Y    89    7    55
H    72    Q    81    Z    90    8    56
I    73    R    82    0    48    9    57

數(shù)字鍵盤上的鍵的鍵
碼值(keyCode)             功能鍵鍵碼值(keyCode)
0    96    8        104     F1    112    F7    118
1    97    9        105     F2    113    F8    119
2    98    *        106     F3    114    F9    120
3    99    +        107     F4    115    F10    121
4    100    Enter     108        F5    116    F11    122
5    101    -        109     F6    117    F12    123
6    102    .        110                    
7    103    /        111                    

控制鍵鍵碼值(keyCode)
BackSpace    8    Esc            27    Right Arrow    39    -_    189
Tab            9    Spacebar    32    Dw Arrow    40    .>    190
Clear        12    Page Up        33    Insert        45    /?    191
Enter        13    Page Down    34    Delete        46    `~    192
Shift        16    End            35    Num Lock    144    [{    219
Control        17    Home        36    ;:            186    |    220
Alt            18    Left Arrow    37    =+            187    ]}    221
Cape Lock    20    Up Arrow    38    ,<            188    ""    222

多媒體鍵碼值(keyCode)
音量加    175
音量減    174
停止        179
靜音        173
瀏覽器    172
郵件        180
搜索        170
收藏        171

但部分鍵碼在不同瀏覽器有不同的值；

這個(gè)屬性只有在發(fā)聲keypress事件才包含值，而且這個(gè)值是按下的那個(gè)鍵所代表字符的ASCⅡ編碼；此時(shí)的keyCode通常等于0或者也可能等于所按鍵的鍵碼。

window.onkeydown = function() {
    console.log(event.charCode); //a的值為0
}
window.onkeypress = function() {
    console.log(event.charCode); //a的值為97
}
window.onkeydown = function() {
    console.log(event.keyCode); //a的值為65
}
window.onkeypress = function() {
    console.log(event.keyCode); //a的值為97
}

上面的例子顯示，當(dāng)onkeydown時(shí)，charCode為0，keyCode為65；當(dāng)onkeypress時(shí)，charCode與keyCode值相同為97

IE8及之前的版本和Opera是在keyCode中保存字符的ASCⅡ編碼，通用版如下：

function getCharCode () {
    if (typeof event.charCode == "number") {
        return event.charCode;
    } else {
        return event.keyCode;
    }
}

獲得了ASCⅡ編碼后，可以通過String.fromCharCode()將其轉(zhuǎn)換成實(shí)際的字符。

var inputName = document.getElementById("name");
var list = [];
inputName.onkeypress = function() {
    var charCode = event.charCode;
    var keys = String.fromCharCode(charCode);
    list.push(keys);
    charCode = null;
    keys = null;
}
inputName.onkeydown = function() {
    var keyCode = event.keyCode;
    switch (keyCode) {
        case 8:
            list.push("backspace");
            break;
        case 37:
            list.push("left")
            break;
        case 39:
            list.push("right")
            break;
        case 13:
            console.log(list.join(""));
            inputName.value = null;
            list.splice(0, list.length);
            break;
    }
}
//輸入oliver，輸出oliver

DOM3級(jí)事件中的鍵盤事件，不再包含charCode屬性，而是包含兩個(gè)新屬性：key和char；

key屬性：返回相應(yīng)的文本字符（字符鍵返回字符，非字符鍵返回“shift”等）；

char屬性：返回相應(yīng)的文本字符（字符鍵返回字符，非字符鍵返回null）；

兼容性：

IE9支持key屬性但不支持char屬性；

Safari 5和Chrome支持名為keyIdentifier的屬性，非字符鍵返回“shift”等，字符鍵返回格式類似“U+0000”的字符串，表示Unicode值。

如下：

window.onkeydown = function () {
    console.log(event.key || event.keyIdentifier);
}

location屬性表示按下了什么位置上的鍵：

0表示默認(rèn)鍵盤；

1表示左側(cè)位置（左邊的Alt鍵等）；

2表示右側(cè)位置；

3表示數(shù)字小鍵盤；

4表示移動(dòng)設(shè)備鍵盤（虛擬鍵盤）；

5表示手柄（Wii控制器等）；

IE9支持這個(gè)屬性；Safari和Chrome支持名為keyLocation屬性（目前貌似支持location屬性了）;

接收一個(gè)參數(shù)（修改鍵），當(dāng)指定的修改鍵是活動(dòng)的，這個(gè)方法返回true，否則返回false；參數(shù)有（“Shift”、“Alt”、“Control”、“Meta”）；

然而事實(shí)上用event.shiftKey等屬性即可。

當(dāng)用戶在可編輯區(qū)域中輸入字符時(shí)，就會(huì)觸發(fā)。與keypress不同，首先只要能獲得焦點(diǎn)的元素都可以觸發(fā)keypress，但只有可編輯區(qū)域才能出發(fā)textInput。另一個(gè)區(qū)別是textInput事件只會(huì)在用戶按下能夠輸入實(shí)際字符的鍵時(shí)才會(huì)被觸發(fā)，keypress則在按下能夠影響文本顯示的鍵時(shí)也會(huì)觸發(fā)（例如退格鍵）。

另外event中data屬性返回用戶輸入的字符：

var textbox = document.getElementById("name");
textbox.addEventListener("textInput", function () {
    console.log(event.data);
})

注意，只能用addEventListener函數(shù)。

dvent對(duì)象上的屬性，表示把文本輸入到文本框中的方式：

0：不確定如何輸入的；

1：鍵盤；

2：粘貼；

3：拖放；

4：IME；

5：表單中選擇某一項(xiàng)輸入；

6：手寫；

7：語音；

8：組合輸入；

9：腳本輸入；