利用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                             →  39

F1键 112                         F2键  113

F3键 114                         F4键  115

F5键 115                         F6键  116

F7键 117                         F8键  118

F1键 119                         F4键  110

退格删除键  8                     TAB键  40

---

通常，快捷键的支持都是在整个Document对象内部都有效的。因此，在声明脚本时可以采用以下方式：

 

<script language="javascript" for="document" event="onkeydown">

 

这样，在整个Document对象内部，你所声明的其内所有的脚本都会生效。因此，如果你需要做的处理都比较简单的话，你也不必要使用function来处理。这种方式或许会更加有效。

为了能够更好的支持虚拟键，JavaScript还对一些常用控制键进行了更进一步的封装，这些键有：Ctrl键、Shift键、Alt键等，对应的操作指令分别为：

 

window.event.ctrlKey

window.event.shiftKey

window.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.  }