原文：http://www.cnblogs.com/rubylouvre/archive/2009/08/20/1550526.html#2583814
在進入正題前，我們看一下瀏覽器對於鍵盤的一些默認事件，這有助於我們用javascript截獲鍵盤事件。
在form中， submit的快捷鍵是 enter，reset的快捷鍵是 esc。不過在IE6,safari4,ff3.5,opera10,chrome中，按Enter，不但激發form的submit事件，同時也會激發提交按鈕的onclick，激發順序為提交按鈕的 onclick → form 的 onsubmit。
<html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>鍵盤事件</title> </head> <body> <h3>鍵盤事件</h3> <form onsubmit="alert('Form is submiting');return false;"> <p><input type="text" value="將焦點聚焦於文本域中，然后按回車鍵或Esc鍵" /></p> <p><input type="submit" onclick="alert('submit button is clicked');" value="submit"/> <input type="reset" onclick="alert('reset button is clicked');" value="reset" /> </p> </form> </body> </html>
不過並不止提交按鈕會激發form的submit事件，連同上面的歸納如下：
- 如果表單里有一個type="submit"的按鈕，回車鍵生效。
- 如果表單里只有一個type="text"的input，不管按鈕是什么type，回車鍵生效。
- 如果按鈕不是用input，而是用button，並且沒有加type，IE下默認為type=button，FX默認為type=submit。
- 其他表單元素如textarea、select不影響，radio checkbox不影響觸發規則，但本身在FX下會響應回車鍵，在IE下不響應。
- type="image"的input，效果等同於type="submit"。不知道為什么會設計這樣一種type，不推薦使用，應該用CSS添加背景圖合適些。
除了在按鈕中綁定鍵盤事件外，瀏覽器還有一個accesskey 屬性來指定鏈接的快捷鍵。注意 accesskey 的設置如果和瀏覽器的菜單相同，會優先於菜單。在IE中，快捷鍵是 alt + 設置的鍵值，FF是Alt+Shift+ 設置的鍵值。 在IE 中，a元素的 accesskey 只是使焦點轉移到鏈接上，並不等同於點擊，FF 中則相當於點擊。與他對比的是，input type=checkbox 的 accesskey 效果不論在IE 還是 FF 中都是點擊。另外，我們還可以配合label標簽來加強語義，個人是十分推薦這種做法的。
剩下的就需要編程了。javascript事件主要通過以下三個事件來捕獲鍵盤事件：onkeydown,onkeypress與onkeyup。該三個事件的執行順序如下：onkeydown -> onkeypress ->onkeyup。在一般情況下，采用三種鍵盤事件均可對鍵盤輸入進行有效的響應。當在實際使用中，會發現這幾者有些不同的差別。
onkeypress事件不能對系統功能鍵(例如：后退、刪除等，其中對中文輸入法不能有效響應)進行正常的響應，onkeydown和onkeyup均可以對系統功能鍵進行有效的攔截，但事件截獲的位置不同，可以根據具體的情況選擇不同的鍵盤事件。
由於onkeypress不能對系統功能鍵進行捕獲，導致window.event對象的keyCode屬性和onkeydown，onkeyup鍵盤事件中獲取的keyCode屬性不同，主要表現在onkeypress事件的keyCode對字母的大小寫敏感，而onkeydown、onkeyup事件不敏感；onkeypress事件的keyCode無法區分主鍵盤上的數字鍵和副鍵盤數字鍵的，而onkeydown、onkeyup的keyCode對主副鍵盤的數字鍵敏感。
<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <meta http-equiv="X-UA-Compatible" content="IE=Edge"> <title>鍵盤事件</title> <style type="text/css"> td { text-align:center; } </style> <script type="text/javascript"> window.onload=function(){ document.onkeydown = showKeyDown document.onkeyup = showKeyUp document.onkeypress = showKeyPress } function showKeyDown(evt) { evt = (evt) ? evt : window.event document.getElementById("pressKeyCode").innerHTML = 0 document.getElementById("upKeyCode").innerHTML = 0 document.getElementById("pressCharCode").innerHTML = 0 document.getElementById("upCharCode").innerHTML = 0 restoreModifiers("") restoreModifiers("Down") restoreModifiers("Up") document.getElementById("downKeyCode").innerHTML = evt.keyCode if (evt.charCode) { document.getElementById("downCharCode").innerHTML = evt.charCode } showModifiers("Down", evt) } function showKeyUp(evt) { evt = (evt) ? evt : window.event document.getElementById("upKeyCode").innerHTML = evt.keyCode if (evt.charCode) { document.getElementById("upCharCode").innerHTML = evt.charCode } showModifiers("Up", evt) return false } function showKeyPress(evt) { evt = (evt) ? evt : window.event document.getElementById("pressKeyCode").innerHTML = evt.keyCode if (evt.charCode) { document.getElementById("pressCharCode").innerHTML = evt.charCode } showModifiers("", evt) return false } function showModifiers(ext, evt) { restoreModifiers(ext) if (evt.shiftKey) { document.getElementById("shift" + ext).style.backgroundColor = "#ff0000" } if (evt.ctrlKey) { document.getElementById("ctrl" + ext).style.backgroundColor = "#00ff00" } if (evt.altKey) { document.getElementById("alt" + ext).style.backgroundColor = "#0000ff" } } function restoreModifiers(ext) { document.getElementById("shift" + ext).style.backgroundColor = "#ffffff" document.getElementById("ctrl" + ext).style.backgroundColor = "#ffffff" document.getElementById("alt" + ext).style.backgroundColor = "#ffffff" } </script> </head> <body> <h3>鍵盤事件</h3> <form> <table border=1 cellpadding="2" cellspacing="0"> <tr> <th></th> <th>onKeyDown</th> <th>onKeyPress</th> <th>onKeyUp</th> </tr> <tr> <th>Key Codes</th> <td id="downKeyCode">0</td> <td id="pressKeyCode">0</td> <td id="upKeyCode">0</td> </tr> <tr> <th>Char Codes (IE5/Mac; NN6)</th> <td id="downCharCode">0</td> <td id="pressCharCode">0</td> <td id="upCharCode">0</td> </tr> <tr> <th rowspan="3">Modifier Keys</th> <td><span id="shiftdown">Shift</span></td> <td><span id="shift">Shift</span></td> <td><span id="shiftUp">Shift</span></td> </tr> <tr> <td><span id="ctrlDown">Ctrl</span></td> <td><span id="ctrl">Ctrl</span></td> <td><span id="ctrlUp">Ctrl</span></td> </tr> <tr> <td><span id="altdown">Alt</span></td> <td><span id="alt">Alt</span></td> <td><span id="altUp">Alt</span></td> </tr> </table> </form> </body> </html>
我們可以利用以下腳本來監聽網頁中的鍵盤事件，一旦用戶按下Enter鍵便開始你綁定的事件。
function getKey(e){ e = e || window.event; var keycode = e.which ? e.which : e.keyCode; if(keycode == 13 || keycode == 108){ //如果按下ENTER鍵 //在這里設置你想綁定的事件 } } // 把keyup事件綁定到document中 function listenKey ( ) { if (document.addEventListener) { document.addEventListener("keyup",getKey,false); } else if (document.attachEvent) { document.attachEvent("onkeyup",getKey); } else { document.onkeyup = getKey; } }
最后附上，鍵盤中所有按鈕的keycode一覽
另外我們還可以用event.altKey，event.ctrlKey，event.metaKey(上有微軟的旗幟)，event.shiftKey來判斷對應的鍵是否被按下，因為它們都是返回一個布爾值。