码迷,mamicode.com
首页 > Web开发 > 详细

JS 事件(9)—键盘事件

时间:2016-08-07 16:47:04      阅读:141      评论:0      收藏:0      [点我收藏+]

标签:

键盘事件

 

对键盘事件的支持主要遵循的是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 };

 

JS 事件(9)—键盘事件

标签:

原文地址:http://www.cnblogs.com/cc156676/p/5746331.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!