JavaScript 事件——“事件类型”中“键盘与文本事件”的注意要点

摘要：级事件为键盘事件制订了规范键盘事件按下任意键触发，如果按住不放，会重复触发按下字符键触发，如果按住不放，会重复触发按下键也会触发释放键盘上的键时触发文本事件在文本插入文本框之前会触发事件。

“DOM3级事件”为键盘事件制订了规范：

键盘事件：

keydown：按下任意键触发，如果按住不放，会重复触发；

keypress：按下字符键触发，如果按住不放，会重复触发；按下Esc键也会触发；

keyup：释放键盘上的键时触发；

文本事件：

textInput：在文本插入文本框之前会触发textInput事件。

程序：

当用户按下一个键盘上的字符键：keydown --> keypress --> keyup；
当用户按下一个键盘上的非字符键：keydown --> keyup；

发声keydown和keyup事件，event对象的keyCode属性包含一个代码，与键盘上一个特定的键对应。对数字字母字符键，keyCode属性的值与ASCⅡ码中对应小写字母或数字的编码相同。

键码如下：

字母和数字键的键码值(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

数字键盘上的键的键
码值(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

但部分键码在不同浏览器有不同的值；

这个属性只有在发声keypress事件才包含值，而且这个值是按下的那个键所代表字符的ASCⅡ编码；此时的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
}

上面的例子显示，当onkeydown时，charCode为0，keyCode为65；当onkeypress时，charCode与keyCode值相同为97

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

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

获得了ASCⅡ编码后，可以通过String.fromCharCode()将其转换成实际的字符。

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级事件中的键盘事件，不再包含charCode属性，而是包含两个新属性：key和char；

key属性：返回相应的文本字符（字符键返回字符，非字符键返回“shift”等）；

char属性：返回相应的文本字符（字符键返回字符，非字符键返回null）；

兼容性：

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

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

如下：

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

location属性表示按下了什么位置上的键：

0表示默认键盘；

1表示左侧位置（左边的Alt键等）；

2表示右侧位置；

3表示数字小键盘；

4表示移动设备键盘（虚拟键盘）；

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

IE9支持这个属性；Safari和Chrome支持名为keyLocation属性（目前貌似支持location属性了）;

接收一个参数（修改键），当指定的修改键是活动的，这个方法返回true，否则返回false；参数有（“Shift”、“Alt”、“Control”、“Meta”）；

然而事实上用event.shiftKey等属性即可。

当用户在可编辑区域中输入字符时，就会触发。与keypress不同，首先只要能获得焦点的元素都可以触发keypress，但只有可编辑区域才能出发textInput。另一个区别是textInput事件只会在用户按下能够输入实际字符的键时才会被触发，keypress则在按下能够影响文本显示的键时也会触发（例如退格键）。

另外event中data属性返回用户输入的字符：

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

注意，只能用addEventListener函数。

dvent对象上的属性，表示把文本输入到文本框中的方式：

0：不确定如何输入的；

1：键盘；

2：粘贴；

3：拖放；

4：IME；

5：表单中选择某一项输入；

6：手写；

7：语音；

8：组合输入；

9：脚本输入；