• 565 阅读
  • 1 回复

如何使Javascript支持组合键

视频在线上传+队列转换FLV+水印+捉图+修复+获时+转3GP(API语言不限,开视频站必备!)

原文地址:如何使Javascript支持组合键作者:maxray_js
0 摘要


很多时候,我们希望在Javascript中能够进行组合键的侦听。在Javascript中,与键盘操作的事件一共有三种,分别是“keydown”“keyup”“keypress”
在网上查阅资料的时候发现,“keydown”事件中,可能是支持组合键的侦听的(具体支持不支持我没有研究)。但是,在综合看了Gmail快捷键和一个JQuery组合键的插件之后,我发现,他们都没有对可能支持组合键的“keydown”事件进行侦听,而是统一对不支持组合键的“keypress”事件进行了扩展,使之支持组合键的操作(至于为什么,希望有研究的朋友可以给我邮件)。
所以这里,我也是对于“keypress”事件进行扩展,使之支持组合键的操作。我的扩展有如下几个特点:
1.支持在原生的Javascript脚本中进行“keypress”事件组合键的侦听。
2.支持在jQuery中的“keypress”事件组合键的侦听。
3.组合键的个数理论上为Javascript中的数组最大长度(2^32 -1)。
4.可以自由的设置组合键中键与键的按下超时时间。

1 问题描述

如何使“keypress”事件被div之类的页面元素侦听到。

如何使非表单元素也可以获取焦点。

 如何侦听“keypress”事件。

 如何获取“keypress”事件发生时用户按下的按键值。

 如何获取“keypress”事件发生时用户按下按键的时间。

 如何让一切变得简单:xHotKey.js

2 解决步骤

2.1如何使“keypress”事件被div之类的页面元素侦听到

 为什么希望“keypress”事件可以被div之类的页面元素侦听到。因为有些时候,并不是在document对象上进行“keypress”事件侦听就能解决问题。比如我希望,用户只有在页面中的某一个元素上按下了键盘按键,才进行事件的侦听。这其中就涉及一个问题:
怎么才能判断用户现在要操作的元素。很简单,只要使相应的元素获得页面的焦点就可以。

2.2如何使非表单元素也可以获取焦点

 如何使非表单元素也可以获取焦点。因为对于表单元素,你可以使用表单元素对象中的
focus()方法,使得在编程的情况下让相应的元素获取焦点。但是,对于非表单元素,使用其focus()方法并不能使其获得焦点。这里就涉及到DOM元素的tabindex属性。

 
[tabindex]
 
DOM元素中的tabindex属性可以设置键盘中的TAB键在控件中的移动顺序,即焦点的顺序。

 把控件的tabindex属性设成132767的一个值,就可以把这个控件加入到TAB键的序列中。

 这样,当浏览者使用TAB键在网页控件中移动时,将首先移动到具有最小tabindex属性值的控件上,最后在具有最大tabindex属性值的控件上结束移动。

 如果有两个控件的tabindex属性相同,则以控件在html代码中出现的顺序为准。

 默认的tabindex属性为 0 ,将排列在在所有指定tabindex的控件之后。

 而若把tabindex属性设为一个负值(如tabindex="-1"),那么这个链接将被排除在TAB键的序列之外。

 在给tabindex特性赋值时,要留意几个问题。下面是几个赋值规则:

 0tabindex的元素根据源代码(或默认页面行为)进行排序。

 大于0tabindex值设定其tab顺序。所有带正tabindex值的元素出现在所有带0 tabindex值的元素之前。

 如果你犯了一个错误,把一个相同的tabindex值赋予给多个元素,像其它元素一样,它们会以一个0tabindex进行处理。

 tabindex赋值为-1,则在使用TAB键时,此元素被忽略。注意:如果使用-1值时,onfocusonblur事件仍被启动。
 
tabindex的值可为032767之间的任意数字


 知道了什么是tabindex之后,上面的问题就变得简单了,对于div之类的元素,只要先给他一个tabindex0(具体是什么值视情况而定)的属性,然后在编程中使用其focus()方法就可以使其获得焦点。

2.3如何侦听“keypress”事件

要想侦听元素的“keypress”事件,对于原生的Javascript
 
document.getElementByIdx_x_x_x(“theElementYouWant”).onkeypress=yourFuncHandle
 对于jQuery
 
$(“#theElementYouWant”).keypress(fn);  
$(“#theElementYouWant”).bind(“keypress”,fn);
2.4如何获取“keypress”事件发生时用户按下的按键值

对于原生的javascript
 
function myFunc(e) {  
   //e为事件对象
 
var e = e || window.event;}
document.getElementByIdx_x_x_x(“theElementYouWant”).onkeypress= myFunc

对于jQuery
$(“#theElementYouWant”).keypress(function (e) {
 
var e = e || window.event;});
$(“#theElementYouWant”).bind(“keypress”,function(e){
 
var e = e || window.event;});
使用上面的方式即可在事件侦听器中获取事件对象e,要想获得用户按下的按键值
只需要获取事件对象ekeyCode属性。

2.5如何获取“keypress”事件发生时用户按下按键的时间

当你使用前面的方法获取事件对象的之后,再获取其timeStamp属性,即为用户按下按键的时间,这个值是一个从1/1/1970 (GMT)到事件发生时的毫秒值。

2.6如何让一切变得简单:xHotKey.js

到现在为止,已经介绍了xHotKey.js中的技术要点,你或许已经完全可以写出一个自己的组合键扩展了。如果你不想去写一个,那么你可以直接使用xHotKey.js。如果你现在还没有思路,那么你可以参看或者修改xHotKey.js的源码,它将是遵循GPL协议的。

2.6.1 如何使用xHotKey.js

在使用xHotKey.js之前,你还必须获取unifyEvent.js,它是一个独立的脚本,用于将各个浏览器之间的事件进行统一。没有它,xHotKey.js将不能工作。

 在页面中引入脚本:
<script type=”text/javascript” src=” unifyEvent.js”></script>
 
<script type=”text/javascript” src=” xHotKey.js”></script>
现在就可以在页面中对你想要的元素进行组合键的侦听了。

//原生Javascript
<script type=”text/javascript”>
 
function myFunc () {  
alert(“myFunc called”);}
var myHotKey = xHotKey(“c x”,1000,myFunc);  //
配置并获取一个//xHotKey对象。
document.getElementByIdx_x_x_x(“elementYouWant”).onkeypress= myHotKey;
//现在当你在“elementYouWant”元素上按下”c”和“x”键之后,将会运行
//那个myFunc函数。
</script>

 
//jQuery
 
<script type=”text/javascript”>  
function myFunc () {  
alert(“myFunc called”);}
var myHotKey = xHotKey(“c x”,1000,myFunc);  //
配置并获取一个//xHotKey对象。
$(“#elementYouWant”).bind(“keypress”, myHotKey);
</script>


 参数:xHotKey(userSetKey, keyTimeOut, userFuncHandle)

名称



说明

userSetKey

字符串

设定希望捕获的组合键,键与键之间使用空格进行分隔。eg:”c x”

keyTimeOut

整型

键与键之间按下的超时时间,以毫秒为单位。

userFuncHandle

函数句柄

当用户输入正确的组合键之后希望执行的函数其句柄。



3 参考资料

Javascript Kit

4作者

 肖思元    tobethe2th@gmail.com    研发部     web

 陈平      chenping@maxray.cn         研发部     web

5版本
 
V0.1       C   2011-11-11
 
V1.0       P   2011-11-11

6 标签

javascript    组合键     keypress     tabindex   焦点

公司:江苏迈瑞信息技术有限公司
地址:江苏扬州市广陵区信息产业服务基地13号楼2
网址:http://www.maxray.cn
邮箱:development@maxray.cn
电话:0514-89886226-802


示例源代码


http://blog.sina.com.cn/s/blog_408cb6ff0100v3vd.html
小鱼的淘宝店铺-多多支持哇
视频在线上传+队列转换FLV+水印+捉图+修复+获时+转3GP(API语言不限,开视频站必备!)
今天发现HotKeys插件的功能真的很强大,且使用简单,以后再也不用考虑键值的问题了,自己定义每个键的函数就行了
使用方法:

复制代码代码如下:

$.hotkeys.add('键名', function(){ 要实现的目的});
//键名可以是单键,也可以是组合键例如:ctrl+c就表示同时按下ctrl和c.


取消某个键的事件:

复制代码代码如下:

$.hotkeys.remove('键名');


具体演示效果请转到我专门翻译的一个页面,你可以自己测试特殊键和组合键:http://img.jb51.net/online/jquery_HotKeys.html

下载插件地址::http://code.google.com/p/js-hotkeys/downloads/list
小鱼的淘宝店铺-多多支持哇