创建博客 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

我的博客

等闲识得东风面,万紫千红总是春!

 
 
 

日志

 
 

jQuery处理键盘事件   

2009-09-19 15:41:46|  分类: Jquery |  标签: |举报 |字号 订阅

额滴神啊,终于让我发现了,基于JS的键盘事件处理工具。

这是一个jQ插件,用它基本上就可以实现类似于本地应用程序那样的快捷键系统。这个插件的名字叫js-hotkeys,名字很普通,但是功能却非常强大。这个插件可以做到全键盘的事件处理,包括F1-F12、Del/Home/PageUp、Tab等特殊键,以及Alt、Shift、Ctrl、Space等组合键,例如Ctrl+Shift+F1等等,而且支持Windows平台下的所有浏览器。

该jQ插件是基于另一个更强大的JS类库,具体可以参见这篇文章:Handling Keyboard Shortcuts in JavaScript。

该插件的调用方法非常简单,可以参考Google Code上的官方说明:点击这里。

也可以看小狮的翻译和总结,如下。

使用

bind

unbind

进行事件绑定,语法:

view plaincopy to clipboardprint?

  1. //绑定事件触发器  

  2. $(expression).bind(types,options, func);  

  3. //解除事件触发器  

  4. $(expression).unbind(types,options, func); 

//绑定事件触发器$(expression).bind(types,options, func);//解除事件触发器$(expression).unbind(types,options, func);

  • expression:这个没啥好说的,指的是DOM对象。
  • types:触发器的类型(也就是在何时触发事件),目前支持keydown、keyup和keypress三种。
  • options:触发器参数。有两个,一个是combi,另一个是disableinInput。前者是指定要绑定的组合键,值是按键的Shortcode,后者是一个布尔值,表示是否屏蔽combi指定的按键,前提是expression必须是一个

    input

    textarea

    对象,默认值是false。

  • func:当options中指定的combi触发时调用的函数。

例子:

view plaincopy to clipboardprint?

  1. //在当前页面绑定Ctrl+a的快捷键,触发执行fn1()函数  

  2. $(document).bind('keydown', 'Ctrl+a', fn1());  

  3.  

  4. //在input.foo中输入的 '$' 字符将自动替换为 '?'  

  5. $('input.foo').bind('keyup', '$', function(){  

  6. this.value = this.value.replace('$', '?');  

  7. });  

  8.  

  9. //在div.foo中按下Ctrl+a将不会再执行fn2()函数  

  10. $('div.foo').unbind('keydown', 'Ctrl+a', fn2());  

  11.  

  12. //在当前页面的input和textarea中将无法输入'a'字符  

  13. $(document).bind('keydown', {combi:'a', disableInInput: true}, fn3()); 

//在当前页面绑定Ctrl+a的快捷键,触发执行fn1()函数$(document).bind('keydown', 'Ctrl+a', fn1());//在input.foo中输入的 '$' 字符将自动替换为 '?'$('input.foo').bind('keyup', '$', function(){this.value = this.value.replace('$', '?');});//在div.foo中按下Ctrl+a将不会再执行fn2()函数$('div.foo').unbind('keydown', 'Ctrl+a', fn2());//在当前页面的input和textarea中将无法输入'a'字符$(document).bind('keydown', {combi:'a', disableInInput: true}, fn3());

不过小狮在测试disableInInput这个参数的时候总是不成功,不知道为什么。哪位知道的高手麻烦指教一下!小狮用的是Chrom测试的。

另外要注意组合键的Shortcode书写顺序是按照字母表顺序的,并且不区分大小写。

  评论这张
 
阅读(2423)| 评论(1)
推荐 转载

历史上的今天

最近读者

热度

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2014