用jQuery处理键盘事件
2009-06-09 21:58
399 查看
这是一个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上的官方说明:点击这里
。
也可以看小狮的翻译和总结,如下。
使用
和
进行事件绑定,语法:
view plain
copy to clipboard
print
?
//绑定事件触发器
$(expression).bind(types,options, func);
//解除事件触发器
$(expression).unbind(types,options, func);
expression:这个没啥好说的,指的是DOM对象。
types:触发器的类型(也就是在何时触发事件),目前支持keydown、keyup和keypress三种。
options:触发器参数。有两个,一个是combi,另一个是disableinInput。前者是指定要绑定的组合键,值是按键的Shortcode,后者是一个布尔值,表示是否屏蔽combi指定的按键,前提是expression必须是一个
或
对象,默认值是false。
func:当options中指定的combi触发时调用的函数。
例子:
view plain
copy to clipboard
print
?
//在当前页面绑定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书写顺序是按照字母表顺序的,并且不区分大小写。
强大。这个插件可以做到全键盘的事件处理,包括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 plain
copy to clipboard
?
//绑定事件触发器
$(expression).bind(types,options, func);
//解除事件触发器
$(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 plain
copy to clipboard
?
//在当前页面绑定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());
//在当前页面绑定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书写顺序是按照字母表顺序的,并且不区分大小写。
相关文章推荐
- 10个用来处理键盘事件的JQuery插件和JS类库
- 10个用来处理键盘事件的JQuery插件和JS类库
- 10个用来处理键盘事件的JQuery插件和JS类库
- Jquery键盘事件处理插件及DEMO
- JQuery中如何处理键盘事件
- jQuery键盘按键事件处理
- jQuery基础系列(三)---事件介绍(3)---事件处理方法
- 源码-JavaScript&jQuery交互式前端开发-第6章-事件-HTML事件处理程序
- Android的键盘事件处理
- javascript/jquery键盘事件介绍
- 处理键盘事件
- Jquery使用on()绑定事件失效处理
- Android 键盘事件处理过程
- Android的frameworks层键盘事件处理流程分析
- Qt Quick事件处理之鼠标、键盘、定时器
- jquery 组合键键盘事件
- jquery技巧总结-jQuery对象,集合,方法扩展,事件处理,特效,解决冲突
- Jquery页面中添加键盘按键事件,如ESC事件
- jQuery入门之二:设置属性,设置事件处理