Keymaster是一个简单的微型库,用于在Web应用程序中定义和分派键盘快捷键。
它没有依赖关系。
包含keymaster.js
在您使用之前引入,照常加载:
< script src = “ keymaster.js ” > < / script >
Keymaster没有依赖关系,可以完全独立使用。它不依赖于任何JavaScript库或框架。
*最好使用适合您工作流程的压缩版本。您可以运行make
UglifyJS(如果已安装)keymaster.min.js
为您创建 压缩文件。
该插件定义了一个全局函数key,在以下使用中直接调用该函数并传入参数即可。
// 定义'当键盘上的a按下时执行的回调函数(键盘上的键不区分大小写,只是监听是否按下了)
key (' a ',function () { alert ('你按了a') } ) ;
// return false 会退出该函数并阻止浏览器的默认事件(这个在mac上的control+r也生效)
key (' ctrl + r ',function () { alert (' stopped reload!') ; return false } ) ;
// 监听多个键盘键,触发相同的回调函数
key(' ⌘+ r,ctrl + r ',function () { } ) ;
调用回调处理函数时有两个配置参数,一个是keydown的事件对象event,另一个是包含以下两个属性的对象handler:
shortcut
:监听所按下的键(组合键)(ctrl+r/
⌘+ r)
scope
:字符串,描述作用范围(例如:all)
key('⌘+r, ctrl+r', function(event, handler){
console.log(handler.shortcut, handler.scope);
});
// “ctrl + r”,“all”
Keymaster可以支持识别以下组合键: ⇧
,shift
,option
,⌥
,alt
,ctrl
,control
,command
,和⌘
。
以下特殊键可以识别为普通键:backspace、tab、clear、enter、return、esc、escape、space、up、down、left、right、home、end、pageup、pagedown、del、delete和f1到f19。
在任何时间点(即使在键快捷键处理程序以外的代码中),您也可以在key
对象中查询任何键的状态。这样可以轻松实现shift + click处理程序等功能。例如, key.shift
是true
的话那么shift键目前正在按压。
if(key.shift) alert('shift is pressed, fendan');
在任何时间点(即使在键快捷键处理程序以外的代码中),您也可以在key
对象中查询任何键的状态。例如, key.isPressed(77)
如果是true,
当前按下是M键。
if(key.isPressed("M")) alert('M key is pressed, can ya believe it!?');
if(key.isPressed(77)) alert('M key is pressed, can ya believe it!?');
您也可以通过以下方法获取一个当前按下键的数组
key.getPressedKeyCodes() // 返回当前按下的键代码数组
如果要在单页面应用程序中为不同区域重复使用相同的按键效果,Keymaster支持在范围之间切换。使用该key.setScope
方法设置作用域范围。
// 使用键盘监听的作用域范围
key (' o,enter ',' issues ',function () { / * do some thing * / } ) ;
key (' o,enter ',' files ',function () { / * do some thing else * / } ) ;
// 设置范围(仅限'all'和'issues'的范围)
key.setScope (' issues ') ; // 默认作用域是' all'
默认情况下,当一个INPUT
,SELECT
或TEXTAREA
标签的聚焦时,keymaster不应该处理任何按键事件。
您可以通过key.filter
使用新功能覆盖来更改此设置。在Keymaster处理按键事件之前调用此函数,并将keydown事件作为参数。
如果您的函数返回false,则将不触发该按键事件。
这是参考的默认实现:
function filter (event ) {
var tagName = (event.target || event.srcElement).tagName;
return !(tagName == 'INPUT' || tagName == 'SELECT' || tagName == 'TEXTAREA');
}
如果您只想在输入元素中使用某些按键事件,则可以更改key.filter
函数中的范围 。这是一个示例实现,将范围设置为'input'
或'other'
。不要忘记返回,true
以便处理任何按键事件。
key.filter = function (event ) {
VAR tagName = (event.target || event.srcElement ).tagName ;
key.setScope (/ ^ ( INPUT | TEXTAREA | SELECT ) $ / .test(tagName)?'input':'other') ;
return true ;
}
但是,处理此问题的更强大的方法是在输入元素上使用适当的focus和blur事件处理程序,并根据需要更改范围。
您可以调用从全局范围中key.noConflict
删除key
函数,并key
在加载Keymaster之前重新定义key函数的内容。调用key.noConflict
将返回Keymaster中的key函数的
功能。
var k = key .noConflict () ;
k (' a ',function () { / * ... * / } ) ;
key ()
// - > TypeError:'undefined',此时k已经代替key,而key已经不是函数
与定义按键事件类似,它们可以使用key.unbind来解绑
。
// 取消绑定'a'按键事件
key.unbind(' a ') ;//相当于删除了按键a时的事件
// 仅为单个作用域取消绑定按键事件
// 当没有指定作用域时,它默认为当前作用域(key.getScope())
key.unbind (' o,enter ',' issues ') ;
key.unbind (' o,enter ',' files ') ;