欢迎光临
我们一直在努力

JavaScript | 键盘事件基础

键盘事类型

键盘事件类型共有三种,分别是:keydown、keypress、keyup。

keydown:当用户按下键盘上的任意键时触发,如果按住不放的话,会重复触发该事件。

keypress:当用户按下键盘上的字符键时触发,按下功能键时不触发。如果按住不放的话,会重复触发该事件。

注意:关于ECS键,各浏览器处理不一致,IE浏览器和Firefox浏览器按下ECS键时会触发keypress事件,Chrome/Safari/Opera浏览器不会触发。

键盘事件必须绑定在可以获取焦点的元素上,而页面刚加载完成时,焦点处于documen元素。

注意:IE浏览器不完全支持绑定在document元素上的keypress事件,只有IE9+浏览器在使用DOM2级事件处理程序时才支持。

keyup:当用户释放键盘时触发。

时间间隔:系统为了防止按键误被连续按下,所以在第一次触发keydown事件后,会有500ms延迟,才会触发第二次keydown事件。类似的,keypress事件也存在500ms事件间隔。

顺序

如果用户一直按键不松开,就会连续触发键盘事件,顺序如下:

1、keydown
2、keypress
3、keydown
4、keypress
5、(重复以上过程)
6、keyup

按键信息

键盘事件包括keyCode、key、char、keyIdentifier和修改键共五个按键信息。

键码keyCode

当发生键盘事件时,event事件对象的键码keyCode属性中会包含一个代码,与键盘上一个特定的键对应。对数字字母字符键,keyCode属性的值与ASCII码中对应的大写字符或数字的编码相同。

注意:firfox浏览器不知keypress事件中的keyCode属性。

对应的键盘码,可以再本文末尾查看。

注意,做游戏时常用左右上下四个键的键码要记住,分别是:38,39,40,41。

key

key属性是为了取代keyCode而新增的,它的值是一个字符串。再按下某个字符键时,key的值就是相应的文本字符;再按下非字符键时,key的值是相应的键名,默认为空字符串。

注意:IE8-浏览器不支持,而safari浏览器不支持keypress事件中的key属性。

char

char属性在按下字符键时的行为与key相同,但在按下非字符键时的值为null

注意:该属性只有IE9+才支持

keyIdentifier

keyIdentifier属性再按下非字符键的情况下与key相同。对于字符键,keyIdentifier返回一个格式类似“U+0000”的字符串,表示Unicode值。

注意:该属性只有Chrome、Safari、Opera浏览器支持。

兼容

一般地,使用key属性和keyCode属性来实现兼容处理。key属性IE8-浏览器不支持,而keyCode属性无法区分大小写字母。

var handler = function(e){
    var CompatibleKey;
    e = e || event;
    //支持key属性
    if(e.key != undefined){
        CompatibleKey = e.key;
    }else{
        //当按键是数字或大写字母时
        if(e.keyCode>47 && e.keyCode<58 || e.keyCode>64 && e.keyCode<91){
            CompatibleKey =String.fromCharCode(e.keyCode);
        }else{
            //当案按键是方向按键时
            switch(e.keyCode){
                case 37:
                    CompatibleKey = 'ArrowLeft';
                    break;
                case 38:
                    CompatibleKey = 'ArrowUp';
                    break;
                case 39:
                    CompatibleKey = 'ArrowRight';
                    break;
                case 40:
                    CompatibleKey = 'ArrowDown';
                    break;
            }
        }    
    }
}

修改键

在键盘事件中,修改键就是Shift、Ctrl、Alt和Meta(在Windows键盘中是Windows键,在苹果机中是Cmd键)。DOM为此规定了4个属性,表示这些修改键的状态:shiftKey、ctrlKey、altKey和metaKey。这些属性中包含的都是布尔值,如果相应的键被按下了,则值为true;否则值为false

注意:通过修改键可以实现提示大写或过滤输入等功能。

附录keyCode

1.字母和数字键的键码值(keyCode)

按键键码
A65
B66
C67
D68
E69
F70
G71
H72
I73
J74
K75
L76
M77
N78
O79
P80
Q81
R82
S83
T84
U85
V86
W87
X88
Y89
Z90
048
149
250
351
452
553
654
755
856
957

2.数字键盘上的键的键码值(keyCode) 功能键键码值(keyCode)

按键键码
096
197
298
399
4100
5101
6102
7103
8104
9105
*106
+107
Enter108
-109
.110
/111
F1112
F2113
F3114
F4115
F5116
F6117
F7118
F8119
F9120
F10121
F11122
F12123

 3.控制键键码值(keyCode)

按键键码
BackSpace8
Esc 27
Right Arrow39
Left Arrow 37
Down Arrow40
Up Arrow38
-_189
.> 190 
Spacebar32 
Tab
Clear12
Page Up33
Page Down34
Enter13
Insert45
;:186
Delete46
`~192
 /?191
Num Lock144
Control 17
Home36 
End35 
Shift16
[{219
 }]221
 \|220
=+187
,<188
'"222
Cape Lock20
Alt18
赞(0) 打赏
未经允许不得转载:散人研 » JavaScript | 键盘事件基础
分享到: 更多 (0)

评论 抢沙发

1 + 9 =
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏