利用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键都屏蔽成将光标向下一个表单元素移动，那么可以加入以下代码：

if(event.keyCode==13 || event.keyCode==40){
    event.keyCode=9;
    CurTabIndex=event.srcElement.tabIndex+1//将当前tabindex的值加1
    for (n=0;n<insert.elements.length;n++)
    {
        if (insert.elements[n].tabIndex==CurTabIndex) //找到下一个表单元素
        {
        insert.elements[n].focus(); //移动焦点
        return true;
        }
    }
  }


但是，你很快就会发现，上面的代码只有在 IE 上有效，而在 Netscape 上却怎么也得不到你想要的结果，原因是 Netscape 和 IE 在对键盘事件的JS支持上是不同的。对于类似于：event.keyCode 这样的东西只有IE才能够支持，而在 Netscape 上，则采用e.which ，因此，如果你的应用需要支持多浏览器版，需要做的在这里也许仅仅是用e.which 来代替 window.event.keyCode 。
用两种浏览器检查上述实例，你会发现执行结果不总是一样的，这是因为两种浏览器的键盘代码设置不相同，因此你必须使用单独的代码分别来写这段程序（行业垄断和竞争的悲剧呀!--痛苦的可是我们这帮程序员呀......）。
以下是一个在网路上找到的对 IE 和 Netscape 进行分别处理的小程序，通过这段代码可以很容易看出两个浏览器的不同处理方式：

function init() {
　　if (ns4) block = document.blockDiv
　　if (ie4) block = blockDiv.style
　　block.xpos = parseInt(block.left)
　　block.active = false
　　document.onkeydown = keyDown
　　document.onkeyup = keyUp
　　if (ns4) document.captureEvents(Event.KEYDOWN | Event.KEYUP)
}
function keyDown(e) {
　　if (ns4) {var nKey=e.which; var ieKey=0}
　　if (ie4) {var ieKey=event.keyCode; var nKey=0}
　　if ((nKey==97 || ieKey==65) && !block.active) { // if "A" key is pressed
　　　　block.active = true slide()
　　}
}
function keyUp(e) {
　　if (ns4) {var nKey=e.which; var ieKey=0}
　　if (ie4) {var ieKey=event.keyCode; var nKey=0}
　　if (nKey==97 || ieKey==65) {
　　block.active = false // if "A" key is released
　　}
}
function slide() {
　　 if (block.active) {
　　　　block.xpos += 5
　　　　block.left = block.xpos
　　　　status = block.xpos // not needed, just for show
　　　　setTimeout("slide()",30)
　　　}
}