keyCode对照表

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

按键键码按键键码按键键码按键键码
A65J74S83149
B66K75T84250
C67L76U85351
D68M77V86452
E69N78W87553
F70O79X88654
G71P80Y89755
H72Q81Z89856
I73R82048957

2、数字键盘上的键的键码值

按键键码按键键码
0968104
1979105
298*106
399+107
4100Enter108
5101-109
6102.110
7103/111

3、功能键的键码值

按键键码按键键码
F1112F7118
F2113F8119
F3114F9120
F4115F10121
F5116F11122
F6117F12123

4.、控制键的键码值(keyCode)

按键键码按键键码按键键码按键键码
BackSpace8Esc27Right Arrow39-_189
Tab9Spacebar32Down Arrow40.>190
Clear12Page Up33Insert45/?191
Enter13Page Down34Delete46`~192
Shift16End35Num Lock144[{219
Control17Home36;:186/|220
Alt18Left Arrow37=+187]}221
Cape Lock20Up Arrow38,<188‘”222

5、多媒体键的键码值(keyCode)

按键键码
音量加175
音量减174
停止179
静音193
浏览器172
邮件180
搜索170
收藏171

onkeyup的缺陷处理

场景说明:在html的input框中限制指定内容输入,例如只允许输入数字(其他情况都是正则表达式变化)。方法很多,以如下代码为例:

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<input type="text" onkeyup='this.value=this.value.replace(/[^\w_]/g,"");'/>
</body>

代码缺陷:上边代码中,input框只能输入数字(本文想阐述的不是这个),但是该方法有个缺陷,当用户输入数字后想修改时,键盘的←键无法使光标向左移动,即便鼠标点击,使光标到指定位置,在按下键盘任意键修改时,光标还是会跑到最右端。 
解决方案及原理:onkeyup中代码是键盘每一次按下放开之后将input框中的value按照正则处理,不符合正则的替换成“”,也就是去掉,具体可以查看js的replace函数。那么上述代码缺陷就可以从keyCode入手。代码如下

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<input type="text"  onkeyup='if(event.keyCode!=8 && event.keyCode!=37 && event.keyCode!=16 && event.keyCode!=20 && event.keyCode!=39 && (event.keyCode<48 || event.keyCode>105) && (!event.shiftKey && event.keyCode != 189))this.value=this.value.replace(/[^\w_]/g,"");'/>
</body>

代码说明:上边event.keyCode后边的数字代表的是键盘对应的按键,可以查看上边的keyCode对照表。上边代码中是按下键盘上数字按键,Backspace按键,←,→按键时,不作正则处理,从而避免了第一段代码的问题。

JS监听组合按键

组合按键一般分以下两种: 
两位组合建,如:ctrl(cmd)+ 其他按键,alt+其他按键,shift+其他按键 
三位组合键,如:ctrl(cmd)+ shift + 其他按键,Ctrl(cmd)+ alt + 其他按键 
在组合键中,js的event中有以下几种属性:ctrlKey(metaKey)、altKey、shiftKey 
以下以按下Shift+1组合键为例(其他的类似):

<!DOCTYPE>
<html>
<head>
    <meta charset="UTF-8">
</head>
<body>
<input type="text" onkeyup="test()"/>
</body>
<script>
function test(){
    if(event.shiftKey && event.keyCode == 49){
        alert(1);
    }
}
</script>

代码说明:执行上述代码后,按下组合键Shift+1在input框中输出!同时,会alert出1。但是个人在测试过程中有个疑问,就是组合键的Shift+其他按键,js如何区分中英文的。

拓展 shortcuts

shortcuts.js可以在网页中增加组合按键,使组合按键更丰富。 
具体使用方法,及更多信息,可以在下面下载链接中下载之后,尝试下。 
点我,shortcuts.js下载地址