keyCode對照表及JS監聽組合按鍵

笨小孩丶發表於2017-03-28
JS

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>

程式碼缺陷：上邊程式碼中，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下載地址

相關文章