用JAVASCRIPT设置快捷键,shortcut.js

xin0723 2012-08-13

展开全文

在一些交互性很强的应用中经常会需要在网页中增加快捷键的情况，比如GOOGLE READER,GMAIL,YAHOO MAIL中都有快捷键的应用。下面介绍一个比较简单又实用的javascript类:shortcut.js,链接中有很多使用示例。

下载地址：http://www./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