javascript 鍵盤事件總結(jié) 推薦
更新時間：2009年12月24日 22:02:39 作者：
在進入正題前，我們看一下瀏覽器對于鍵盤的一些默認(rèn)事件，這有助于我們用javascript截獲鍵盤事件。
在form中， submit的快捷鍵是 enter，reset的快捷鍵是 esc。不過在IE6,safari4,ff3.5,opera10,chrome中，按Enter，不但激發(fā)form的submit事件，同時也會激發(fā)提交按鈕的onclick，激發(fā)順序為提交按鈕的 onclick → form 的 onsubmit。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
不過并不止提交按鈕會激發(fā)form的submit事件，連同上面的歸納如下：
1. 如果表單里有一個type="submit"的按鈕，回車鍵生效。
2. 如果表單里只有一個type="text"的input，不管按鈕是什么type，回車鍵生效。
3. 如果按鈕不是用input，而是用button，并且沒有加type，IE下默認(rèn)為type=button，F(xiàn)X默認(rèn)為type=submit。
4. 其他表單元素如textarea、select不影響，radio checkbox不影響觸發(fā)規(guī)則，但本身在FX下會響應(yīng)回車鍵，在IE下不響應(yīng)。
5. type="image"的input，效果等同于type="submit"。不知道為什么會設(shè)計這樣一種type，不推薦使用，應(yīng)該用CSS添加背景圖合適些。
除了在按鈕中綁定鍵盤事件外，瀏覽器還有一個accesskey 屬性來指定鏈接的快捷鍵。注意 accesskey 的設(shè)置如果和瀏覽器的菜單相同，會優(yōu)先于菜單。在IE中，快捷鍵是 alt + 設(shè)置的鍵值，F(xiàn)F是Alt+Shift+ 設(shè)置的鍵值。 在IE 中，a元素的 accesskey 只是使焦點轉(zhuǎn)移到鏈接上，并不等同于點擊，F(xiàn)F 中則相當(dāng)于點擊。與他對比的是，input type=checkbox 的 accesskey 效果不論在IE 還是 FF 中都是點擊。另外，我們還可以配合label標(biāo)簽來加強語義，個人是十分推薦這種做法的。
剩下的就需要編程了。javascript事件主要通過以下三個事件來捕獲鍵盤事件：onkeydown,onkeypress與onkeyup。該三個事件的執(zhí)行順序如下：onkeydown -> onkeypress ->onkeyup。在一般情況下，采用三種鍵盤事件均可對鍵盤輸入進行有效的響應(yīng)。當(dāng)在實際使用中，會發(fā)現(xiàn)這幾者有些不同的差別。
onkeypress事件不能對系統(tǒng)功能鍵(例如：后退、刪除等，其中對中文輸入法不能有效響應(yīng))進行正常的響應(yīng)，onkeydown和onkeyup均可以對系統(tǒng)功能鍵進行有效的攔截，但事件截獲的位置不同，可以根據(jù)具體的情況選擇不同的鍵盤事件。
由于onkeypress不能對系統(tǒng)功能鍵進行捕獲，導(dǎo)致window.event對象的keyCode屬性和onkeydown，onkeyup 鍵盤事件中獲取的keyCode屬性不同，主要表現(xiàn)在onkeypress事件的keyCode對字母的大小寫敏感，而onkeydown、 onkeyup事件不敏感；onkeypress事件的keyCode無法區(qū)分主鍵盤上的數(shù)字鍵和副鍵盤數(shù)字鍵的，而onkeydown、onkeyup 的keyCode對主副鍵盤的數(shù)字鍵敏感。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
我們可以利用以下腳本來監(jiān)聽網(wǎng)頁中的鍵盤事件，一旦用戶按下Enter鍵便開始你綁定的事件。
function getKey(e){
e = e || window.event;
var keycode = e.which ? e.which : e.keyCode;
if(keycode == 13 || keycode == 108){ //如果按下ENTER鍵
//在這里設(shè)置你想綁定的事件
}
}
// 把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來判斷對應(yīng)的鍵是否被按下，因為它們都是返回一個布爾值。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
不過并不止提交按鈕會激發(fā)form的submit事件，連同上面的歸納如下：
1. 如果表單里有一個type="submit"的按鈕，回車鍵生效。
2. 如果表單里只有一個type="text"的input，不管按鈕是什么type，回車鍵生效。
3. 如果按鈕不是用input，而是用button，并且沒有加type，IE下默認(rèn)為type=button，F(xiàn)X默認(rèn)為type=submit。
4. 其他表單元素如textarea、select不影響，radio checkbox不影響觸發(fā)規(guī)則，但本身在FX下會響應(yīng)回車鍵，在IE下不響應(yīng)。
5. type="image"的input，效果等同于type="submit"。不知道為什么會設(shè)計這樣一種type，不推薦使用，應(yīng)該用CSS添加背景圖合適些。
除了在按鈕中綁定鍵盤事件外，瀏覽器還有一個accesskey 屬性來指定鏈接的快捷鍵。注意 accesskey 的設(shè)置如果和瀏覽器的菜單相同，會優(yōu)先于菜單。在IE中，快捷鍵是 alt + 設(shè)置的鍵值，F(xiàn)F是Alt+Shift+ 設(shè)置的鍵值。 在IE 中，a元素的 accesskey 只是使焦點轉(zhuǎn)移到鏈接上，并不等同于點擊，F(xiàn)F 中則相當(dāng)于點擊。與他對比的是，input type=checkbox 的 accesskey 效果不論在IE 還是 FF 中都是點擊。另外，我們還可以配合label標(biāo)簽來加強語義，個人是十分推薦這種做法的。
剩下的就需要編程了。javascript事件主要通過以下三個事件來捕獲鍵盤事件：onkeydown,onkeypress與onkeyup。該三個事件的執(zhí)行順序如下：onkeydown -> onkeypress ->onkeyup。在一般情況下，采用三種鍵盤事件均可對鍵盤輸入進行有效的響應(yīng)。當(dāng)在實際使用中，會發(fā)現(xiàn)這幾者有些不同的差別。
onkeypress事件不能對系統(tǒng)功能鍵(例如：后退、刪除等，其中對中文輸入法不能有效響應(yīng))進行正常的響應(yīng)，onkeydown和onkeyup均可以對系統(tǒng)功能鍵進行有效的攔截，但事件截獲的位置不同，可以根據(jù)具體的情況選擇不同的鍵盤事件。
由于onkeypress不能對系統(tǒng)功能鍵進行捕獲，導(dǎo)致window.event對象的keyCode屬性和onkeydown，onkeyup 鍵盤事件中獲取的keyCode屬性不同，主要表現(xiàn)在onkeypress事件的keyCode對字母的大小寫敏感，而onkeydown、 onkeyup事件不敏感；onkeypress事件的keyCode無法區(qū)分主鍵盤上的數(shù)字鍵和副鍵盤數(shù)字鍵的，而onkeydown、onkeyup 的keyCode對主副鍵盤的數(shù)字鍵敏感。
[Ctrl+A 全選 注:引入外部Js需再刷新一下頁面才能執(zhí)行]
我們可以利用以下腳本來監(jiān)聽網(wǎng)頁中的鍵盤事件，一旦用戶按下Enter鍵便開始你綁定的事件。
復(fù)制代碼 代碼如下:
function getKey(e){
e = e || window.event;
var keycode = e.which ? e.which : e.keyCode;
if(keycode == 13 || keycode == 108){ //如果按下ENTER鍵
//在這里設(shè)置你想綁定的事件
}
}
// 把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一覽
| 字母和數(shù)字鍵的鍵碼值(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 | 90 | 8 | 56 |
| I | 73 | R | 82 | 0 | 48 | 9 | 57 |
| 數(shù)字鍵盤上的鍵的鍵碼值(keyCode) | 功能鍵鍵碼值(keyCode) | ||||||
|---|---|---|---|---|---|---|---|
| 按鍵 | 鍵碼 | 按鍵 | 鍵碼 | 按鍵 | 鍵碼 | 按鍵 | 鍵碼 |
| 0 | 96 | 8 | 104 | F1 | 112 | F7 | 118 |
| 1 | 97 | 9 | 105 | F2 | 113 | F8 | 119 |
| 2 | 98 | * | 106 | F3 | 114 | F9 | 120 |
| 3 | 99 | + | 107 | F4 | 115 | F10 | 121 |
| 4 | 100 | Enter | 108 | F5 | 116 | F11 | 122 |
| 5 | 101 | - | 109 | F6 | 117 | F12 | 123 |
| 6 | 102 | . | 110 | ||||
| 7 | 103 | / | 111 | ||||
| 控制鍵鍵碼值(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 |
另外我們還可以用event.altKey，event.ctrlKey，event.metaKey(上有微軟的旗幟)，event.shiftKey來判斷對應(yīng)的鍵是否被按下，因為它們都是返回一個布爾值。
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了微信小程序入門之指南針，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-10-10
這篇文章主要為大家介紹了詳解如何替換項目中的if-else和switch，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-11-11
這篇文章主要為大家詳細(xì)介紹了JavaScript前端如何實現(xiàn)截屏功能,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
這篇文章主要介紹了JS獲取圖片高度寬度的方法，開始的時候沒能做到兼容chrome，在度娘和眾網(wǎng)友的幫助下，最終完成了完美兼容，這里分享給大家，有需要的小伙伴可以參考下。2015-04-04
超詳細(xì)JavaScript深淺拷貝的實現(xiàn)教程
淺拷貝是指，一個新的對象對原始對象的屬性值進行精確地拷貝；深拷貝是指，對于簡單數(shù)據(jù)類型直接拷貝他的值，對于引用數(shù)據(jù)類型，在堆內(nèi)存中開辟一塊內(nèi)存用于存放復(fù)制的對象，并把原有的對象類型數(shù)據(jù)拷貝過來。本文將實現(xiàn)JavaScript深淺拷貝，需要的可以參考一下2022-09-09
實例詳解JSON數(shù)據(jù)格式及json格式數(shù)據(jù)域字符串相互轉(zhuǎn)換
JSON(JavaScript Object Notation)是一種輕量級的數(shù)據(jù)交換格式。JSON采用完全獨立于語言的文本格式，這些特性使JSON成為理想的數(shù)據(jù)交換語言2016-01-01
d3.js中冷門卻實用的內(nèi)置函數(shù)總結(jié)
D3.js是一個JavaScript庫，它可以通過數(shù)據(jù)來操作文檔。D3可以通過使用HTML、SVG和CSS把數(shù)據(jù)鮮活形象地展現(xiàn)出來。d3.js其實提供了很多內(nèi)置的函數(shù)，可以卻被大家忽略了，下面這篇文章就來給大家詳細(xì)介紹了d3.js中冷門卻實用的一些內(nèi)置函數(shù),需要的朋友可以參考借鑒。2017-02-02
這篇文章主要介紹了JS實現(xiàn)光滑展開合攏的菜單效果代碼,涉及JavaScript響應(yīng)鼠標(biāo)事件遍歷并改變頁面元素屬性的相關(guān)技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-09-09
這篇文章主要介紹了JavaScript接口的實現(xiàn)三種方式，有注釋法，檢查屬性法和鴨式辨行法，非常不錯，具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
將圖片查詢出來之后，還需要加一個查看大圖的功能，于是就用js寫了一個方法，然后在image的onmouseover事件中調(diào)用此方法，這樣在鼠標(biāo)懸浮在小圖上面的時候，其大圖就會自動的顯示出來。2013-03-03