用JAVASCRIPT设置快捷键,shortcut.js
全文转自:http://www.enjoyphp.com/2009/front/javascript/shortcut-js/
在一些交互性很强的应用中经常会需要在网页中增加快捷键的情况,比如GOOGLE READER,GMAIL,YAHOO MAIL中都有快捷键的应用。下面介绍一个比较简单又实用的javascript类:shortcut.js,链接中有很多使用示例。
下载地址:http://www.openjs.com/scripts/events/keyboard_shortcuts/shortcut.js
下面内容主要为官方文档的翻译,但也加入了一些我的理解。
使用说明
该类主要有两个方法组成:shortcut.add()、shortcut.remove(),下面分别介绍:
shortcut.add(key,func,options)
该方法有三个参数:
key :要设置的快捷键,比如”CTRL A”,书写形式为 :功能键[ 功能键..] 其他键。详情见下面支持键列表;
func: 响应快捷键的函数,当快捷键按下时,将执行该函数;
options: 配置参数,以关联数组形式填写,参数包括下面几个:
type – String
事件类型 – 可以是’keydown’,'keyup’,'keypress’。默认为 ‘keydown’
disable_in_input – Boolean
是否在输入表单时屏蔽快捷键 – 如果该项设置为true,当光标焦点在input或textarea时,快捷键将屏蔽。这项功能是非常有用的,特别是当我们设置的快捷键只需按一个键时。该项默认为false
target – DOM Node
响应快捷键的元素范围。默认为 : document
propagate – Boolean
是否允许继承? 默认 : false
keycode – Integer
监视的键盘编码。比如, 编码’65′ 为按键 ‘a’.
options参数示例:
1 |
{ |
2 |
'type' : 'keydown' , |
3 |
'propagate' : false , |
4 |
'disable_in_input' : true , |
5 |
'target' :document, |
6 |
'keycode' :65 |
7 |
} |
示例:
1 |
shortcut.add( 'Ctrl B' , function () { |
2 |
alert( 'The bookmarks of your browser will show up after this alert...' ); |
3 |
},{ |
4 |
'type' : 'keydown' , |
5 |
'propagate' : true , |
6 |
'target' :document |
7 |
}); |
shortcut.remove()
只有一个参数,即前面设置的的快捷键组合。确保跟前面设置的快捷键组合是一样的,比如我们前面shortcut.add()的第一个参数为“CTRL A”,此处也必须为“CTRL A”。
示例:
1 |
shortcut.add( 'Ctrl B' , function () { |
2 |
alert( 'Bold' ); |
3 |
}); |
4 |
//Remove the shortcut |
5 |
shortcut.remove( 'Ctrl B' ); |
支持的键:
快捷键必须是下面的形式:
功能键[ 功能键..] 其他键
比如:
Ctrl A
支持的功能键有
* Ctrl
* Alt
* Shift
* Meta
功能键可以省略,比如设置快捷键X:
1 |
shortcut.add( 'X' , function () { |
2 |
alert( 'Hello!' ); |
3 |
}); |
其他允许的键:
* 所有数字、字母键 – abc…xyz,01..89
* 特殊字符-任何标准键盘上的特殊字符都可以
* 特殊按键…
o Tab
o Space
o Return
o Enter
o Backspace
o Scroll_lock
o Caps_lock
o Num_lock
o Pause
o Insert
o Home
o Delete
o End
o Page_up
o Page_down
o Left
o Up
o Right
o Down
o F1
o F2
o F3
o F4
o F5
o F6
o F7
o F8
o F9
o F10
o F11
o F12
所有这些按键都是不区分大小写的,可以放心填写。
除shortcuts外,还有其他一些类似的库:
jquery插件:jQuery Keyboard Hooker Plugin by Tzury Bar Yochay
If you want an easier way to generate the string for the shortcut, take a look at Jonathan Tang’s Keycode.js.