利用Javascript指令碼捕獲鍵盤事件

利用Javascript指令碼捕獲鍵盤事件

關鍵字: javascript 捕獲鍵盤事件

在很多應用中，使用者都希望WEB應用能夠在介面上支援一些快速鍵，最常見的就是上下左右、TAB、斷行符號等的快速鍵支援。拋開在頁面上運行Applet、Flash 的方式來對鍵盤快速鍵支援外，利用JavaScript也能夠有出色的表現。在對鍵盤時間的支援上，作業系統提供了一整套的虛擬鍵索引值，要使我們的應用能夠很好的支援快速鍵，瞭解這些索引值是必不可少的。現將常見的索引值列舉如下：A 0X65                            U 0X85
B 0X66                            V 0X86
C 0X67                            W 0X87
D 0X68                            X 0X88
E 0X69                            Y 0X89
F 0X70                            Z 0X90
G 0X71                            0 0X48
H 0X72                            1 0X49
I 0X73                            2 0X50
J 0X74                            3 0X51
K 0X75                            4 0X52
L 0X76                            5 0X53
M 0X77                            6 0X54
N 0X78                            7 0X55
O 0X79                            8 0X56
P 0X80                            9 0X57
Q 0X81                            ESC 0X1B
R 0X82                            CTRL 0X11
S 0X83                            SHIFT 0X10
T 0X84                            ENTER 0XD（用十進位就是13）還有方向鍵：← 37                             →  39F1鍵 112                         F2鍵  113F3鍵 114                         F4鍵  115F5鍵 115                         F6鍵  116F7鍵 117                         F8鍵  118F1鍵 119                         F4鍵  110退格刪除鍵  8                     TAB鍵  40通常，快速鍵的支援都是在整個Document對象內部都有效。因此，在聲明指令碼時可以採用以下方式： <script language="javascript" for="document" event="onkeydown"> 這樣，在整個Document對象內部，你所聲明的其內所有的指令碼都會生效。因此，如果你需要做的處理都比較簡單的話，你也不必要使用function來處理。這種方式或許會更加有效。為了能夠更好的支援虛擬鍵，JavaScript還對一些常用修飾鍵進行了更進一步的封裝，這些鍵有：Ctrl鍵、Shift鍵、Alt鍵等，對應的操作指令分別為： window.event.ctrlKeywindow.event.shiftKeywindow.event.altKey  舉個簡單的例子：如果我們要在頁面上將Enter鍵和Tab鍵都屏蔽成將游標向下一個表單元素移動，那麼可以加入以下代碼：js 代碼

1. if(event.keyCode==13 || event.keyCode==40){   
2.     event.keyCode=9;   
3.     CurTabIndex=event.srcElement.tabIndex+1//將當前tabindex的值加1   
4.     for (n=0;n<insert.elements.length;n++)   
5.     {   
6.         if (insert.elements[n].tabIndex==CurTabIndex) //找到下一個表單元素   
7.         {   
8.         insert.elements[n].focus(); //移動焦點   
9.         return true;   
10.         }   
11.     }   
12.   }  

但是，你很快就會發現，上面的代碼只有在 IE 上有效，而在 Netscape 上卻怎麼也得不到你想要的結果，原因是 Netscape 和 IE 在對鍵盤事件的JS支援上是不同的。對於類似於：event.keyCode 這樣的東西只有IE才能夠支援，而在 Netscape 上，則採用e.which ，因此，如果你的應用需要支援多瀏覽器版，需要做的在這裡也許僅僅是用e.which 來代替 window.event.keyCode 。用兩種瀏覽器檢查上述執行個體，你會發現執行結果不總是一樣的，這是因為兩種瀏覽器的鍵盤代碼設定不相同，因此你必須使用單獨的代碼分別來寫這段程式（行業壟斷和競爭的悲劇呀!--痛苦的可是我們這幫程式員呀......）。以下是一個在網路上找到的對 IE 和 Netscape 進行分別處理的小程式，通過這段代碼可以很容易看出兩個瀏覽器的不同處理方式：js 代碼

1. function init() {    
2.  　　if (ns4) block = document.blockDiv    
3.  　　if (ie4) block = blockDiv.style    
4.  　　block.xpos = parseInt(block.left)    
5.  　　block.active = false    
6.  　　document.onkeydown = keyDown    
7.  　　document.onkeyup = keyUp    
8.  　　if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP)    
9.  }    
10.  function keyDown(e) {    
11.  　　if (ns4) {var nKey=e.which; var ieKey=0}    
12.  　　if (ie4) {var ieKey=event.keyCode; var nKey=0}    
13.  　　if ((nKey==97 || ieKey==65) && !block.active) { // if "A" key is pressed    
14.  　　　　block.active = true slide()    
15.  　　}    
16.  }    
17.  function keyUp(e) {    
18.  　　if (ns4) {var nKey=e.which; var ieKey=0}    
19.  　　if (ie4) {var ieKey=event.keyCode; var nKey=0}    
20.  　　if (nKey==97 || ieKey==65) {    
21.  　　block.active = false // if "A" key is released    
22.  　　}    
23.  }    
24.  function slide() {    
25.  　　 if (block.active) {    
26.  　　　　block.xpos += 5    
27.  　　　　block.left = block.xpos    
28.  　　　　status = block.xpos // not needed, just for show    
29.  　　　　setTimeout("slide()",30)    
30.  　　　}    
31.  }