JS 事件（9）—键盘事件

键盘事件

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

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

keydown事件

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

keypress事件

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

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

keyup事件

释放键盘上的键时触发。

触发顺序

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

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

键盘事件的修改键

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

 1 document.onkeyup = function(event) {
 2     event = event || window.event;
 3     var array = [];
 4     if(event.altKey) {
 5         array.push("alt");
 6     };
 7     if(event.ctrlKey) {
 8         array.push("ctrl");
 9     };
10     if(event.shiftKey) {
11         array.push("shift");
12     };
13     if(event.metaKey) {
14         array.push("meta");
15     };
16     if(event.keyCode ===13) {
17         alert("按下回车键的同时也按下了：" + array.join("，"));
18     };
19 };

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

键码

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

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

1 document.onkeyup = function(event) {
2     event = event || window.event;
3     alert(event.keyCode);
4 };

字符编码

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

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

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