keyCode对照表及JS监听组合按键

Posted 牛顿的小脑

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了keyCode对照表及JS监听组合按键相关的知识，希望对你有一定的参考价值。

原文： http://blog.csdn.net/qq_21386275/article/details/67640576

有一些需求，html 页面上的input 框只允许输入数字，  只允许输入小数，等等。

这个时候，就要获取键盘每次按键时候的  keyCode， 来判断是按的哪个键（数字键还是字符键，还是组合键）， 然后加入我们的需求对应的处理逻辑。

----------------------------------------------------------------------------------------------------

keyCode对照表

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

按键键码按键键码按键键码按键键码
A 65 J 74 S 83 1 49
B 66 K 75 T 84 2 50
C 67 L 76 U 85 3 51
D 68 M 77 V 86 4 52
E 69 N 78 W 87 5 53
F 70 O 79 X 88 6 54
G 71 P 80 Y 89 7 55
H 72 Q 81 Z 89 8 56
I 73 R 82 0 48 9 57

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

按键键码按键键码
0 96 8 104
1 97 9 105
2 98 * 106
3 99 + 107
4 100 Enter 108
5 101 - 109
6 102 . 110
7 103 / 111

3、功能键的键码值

按键键码按键键码
F1 112 F7 118
F2 113 F8 119
F3 114 F9 120
F4 115 F10 121
F5 116 F11 122
F6 117 F12 123

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

按键键码按键键码按键键码按键键码
BackSpace 8 Esc 27 Right Arrow 39 -_ 189
Tab 9 Spacebar 32 Down Arrow 40 .> 190
Clear 12 Page Up 33 Insert 45 /? 191
Enter 13 Page Down 34 Delete 46 `~ 192
Shift 16 End 35 Num Lock 144 [{ 219
Control 17 Home 36 ;: 186 /| 220
Alt 18 Left Arrow 37 =+ 187 ]} 221
Cape Lock 20 Up Arrow 38 ,< 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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

代码缺陷：上边代码中，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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8

代码说明：上边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>
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

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

拓展 shortcuts

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








以上是关于keyCode对照表及JS监听组合按键的主要内容，如果未能解决你的问题，请参考以下文章

keyCode对照表

Keycode对照表（键码对照表） 转

keyCode对照信息表

求键盘的所有按键对应的JS函数~~~！！！！或者提供网页键盘源代码！！

enter键触发的函数

unity监听键盘按键