js中的鍵盤事件

EmineWang發表於2013-10-20
JS事件

本文轉自：http://www.cnblogs.com/rubylouvre/archive/2009/08/20/1550526.html

在進入正題前，我們看一下瀏覽器對於鍵盤的一些預設事件，這有助於我們用javascript截獲鍵盤事件。

在form中， submit的快捷鍵是 enter，reset的快捷鍵是 esc。不過在IE6,safari4,ff3.5,opera10,chrome中，按Enter，不但激發form的submit事件，同時也會激發提交按鈕的onclick，激發順序為提交按鈕的 onclick →　form 的 onsubmit。

不過並不止提交按鈕會激發form的submit事件，連同上面的歸納如下：

  1. 如果表單裡有一個type="submit"的按鈕，Enter鍵生效。
  2. 如果表單裡只有一個type="text"的input，不管按鈕是什麼type，Enter鍵生效。
  3. 如果按鈕不是用input，而是用button，並且沒有加type，IE下預設為type=button，FX預設為type=submit。
  4. 其他表單元素如textarea、select不影響，radio checkbox不影響觸發規則，但本身在FX下會響應Enter鍵，在IE下不響應。
  5. type="image"的input，效果等同於type="submit"。不知道為什麼會設計這樣一種type，不推薦使用，應該用CSS新增背景圖合適些。

除了在按鈕中繫結鍵盤事件外，瀏覽器還有一個accesskey 屬性來指定連結的快捷鍵。注意 accesskey的設定如果和瀏覽器的選單相同，會優先於選單。在IE中，快捷鍵是 alt + 設定的鍵值，FF是Alt+Shift+ 設定的鍵值。 在IE中，a元素的 accesskey 只是使焦點轉移到連結上，並不等同於點選，FF 中則相當於點選。與他對比的是，inputtype=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對主副鍵盤的數字鍵敏感。

我們可以利用以下指令碼來監聽網頁中的鍵盤事件，一旦使用者按下Enter鍵便開始你繫結的事件。

01.functiongetKey(e){
02.    e = e || window.event;
03.    varkeycode = e.which ? e.which : e.keyCode;
04.    if(keycode == 13 || keycode == 108){//如果按下ENTER鍵
05.       //在這裡設定你想繫結的事件
06.    }
07.}
08. 
09.// 把keyup事件繫結到document中
10.functionlistenKey (  ) {
11.    if(document.addEventListener) {
12.        document.addEventListener("keyup",getKey,false);
13.    }else if (document.attachEvent) {
14.        document.attachEvent("onkeyup",getKey);
15.    }else {
16.        document.onkeyup = getKey;
17.    }
18.}

最後附上，鍵盤中所有按鈕的keycode一覽

字母和數字鍵的鍵碼值(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

 

數字鍵盤上的鍵的鍵碼值(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 A

相關文章