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

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

键盘事件：

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

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

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

文本事件：

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

程序：

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

键盘事件

键码event.keyCode属性

发声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

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

字符编码charCode属性

这个属性只有在发声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级变化

key、char、keyIdentifier属性

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和keyLocation属性

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

• 0表示默认键盘；

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

• 2表示右侧位置；

• 3表示数字小键盘；

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

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

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

getModifierState()方法

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

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

textInput事件

textInput事件

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

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

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

注意，只能用addEventListener函数。

inputMethod属性

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

• 0：不确定如何输入的；

• 1：键盘；

• 2：粘贴；

• 3：拖放；

• 4：IME；

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

• 6：手写；

• 7：语音；

• 8：组合输入；

• 9：脚本输入；