原文： 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下載地址