JS 事件（8）—键盘事件

键盘事件

 

对键盘事件的支持主要遵循的是DOM0级。

“DOM3级事件”为键盘事件制定了规范，IE9率先实现。

 

keydown事件

按下键盘上的任意键触发；按住不放，重复触发。

 

keypress事件

按下键盘上的字符键触发；按住不放，重复触发。

按下Esc键也会触发这个事件。

 

keyup事件

释放键盘上的键时触发。

 

触发顺序

（1）当按下键盘上的一个字符键时，首先触发keydown事件，然后紧跟着keypress事件，最后会触发keyup事件。其中，keydown和keypress事件是在文本框发生变化之前触发；而keyup事件则是在文本框发生变化之后触发的。

（2）当按下键盘上的一个非字符键，那么首先触发keydown事件， 然后是keyup事件。

 

键盘事件的修改键

键盘事件与鼠标事件一样，都支持相应的修改键；而且，键盘事件的对象中也包含shiftKey、ctrlKey、altKey和metaKey属性；IE不支持metaKey。

document.onkeyup = function(event) {
    event = event || window.event;
    var array = [];
    if(event.altKey) {
        array.push("alt");
    };
    if(event.ctrlKey) {
        array.push("ctrl");
    };
    if(event.shiftKey) {
        array.push("shift");
    };
    if(event.metaKey) {
        array.push("meta");
    };
    if(event.keyCode === 13) {
        alert("按下回车键的同时也按下了：" + array.join("，"));
    };
};

 

还是老问题，metaKey属性检测不出来。

 

键码

在发生keydown和keyup事件时，event对象中的keyCode属性中会包含一个代码，与键盘上一个特定的键对应。

对于数字、字母字符键，keyCode值与ASCII中对应的小写字母与数字的编码相同；也就是说，大小写字母的keyCode值没有区别。

document.onkeyup = function(event) {
    event = event || window.event;
    alert(event.keyCode);
};

 

字符编码

在所有浏览器中，按下能够插入或者删除字符的键都会触发keypress事件。

IE9、Firefox、Safari、Chrome的event对象都支持一个charCode属性，这个属性只有在发生keypress事件时包含值，而且这个值是按下的那个键所代码的字符的AECII编码，大小写字母的charCode值不同。

document.onkeypress = function(event) {
    event = event || window.event;
    alert("charCode：" + event.charCode);
};