利用Javascript脚本捕获键盘事件

danlley

浏览: 365032 次
性别:
来自: 西安

最近访客更多访客>>

ybfjavaeye

yhgzjzxz

郭自峰

我心悸

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

J2EE

脚本 JavaScript IE Flash 浏览器

在很多应用中，用户都希望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对象内部都有效的。因此，在声明脚本时可以采用以下方式：

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

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

window.event.ctrlKey

window.event.shiftKey

window.event.altKey

举个简单的例子：如果我们要在页面上将Enter键和Tab键都屏蔽成将光标向下一个表单元素移动，那么可以加入以下代码：

js 代码

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 进行分别处理的小程序，通过这段代码可以很容易看出两个浏览器的不同处理方式：

js 代码

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)
　　　}
}

分享到：

利用Java 第三方控件 jxl对M$ Excel 进行 ... | 让你 Oracle 的存储过程与Java代码开始进行 ...

2007-07-17 11:31
浏览 4271
评论(1)
查看更多

1 楼 chnmgs 2008-09-03

[flash=200,200][/flash][url][/url][img][/img]

引用

[u][/u][i][/i][b][/b]

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论