Keymaster.js 快速绑定键盘操作的 JavaScript 库
Keymaster.js 是一个 JavaScript 的库,用户绑定键盘的快捷方式操作,他是一个轻量级的插件,压缩版本不到100K,不依赖任何第三方插件库,能支持多种键盘按钮和组合按键。
使用方法
1、像往常一样,引入 keymaster.js
文件到你的项目中。
<script src="keymaster.js"></script>
Keymaster.js 没有依赖性,完全可以作为独立的。 不干扰任何JavaScript库或。
在实际运行中,你应该使用压缩版,体积更小,你可以运行run通过 UglifyJS 创建keymaster.min.js
为你的文件。
定义快捷键
一个全局定义快捷键的方式,key
它定义了快捷键,当直接调用。
// define short of 'a' key('a', function(){ alert('you pressed a!') }); // returning false stops the event and prevents default browser events key('ctrl+r', function(){ alert('stopped reload!'); return false }); // multiple shortcuts that do the same thing key('⌘+r, ctrl+r', function(){ });
处理方法是用两个参数调用设置,KeyDown event
并对象包含,除其他外,以下两个属性:
shortcut
:一个字符串包含快捷键使用,例如按ctrl+r
scope:
一个字符串(或all
)
key('⌘+r, ctrl+r', function(event, handler){ console.log(handler.shortcut, handler.scope); }); // "ctrl+r", "all"
支持按键
Keymaster.js支持下列修饰符:⇧
, shift
, option
, ⌥
, alt
, ctrl
, control
, command
, and ⌘
。
下列特殊键可以使用快捷键:backspace
, tab
, clear
, enter
, return
, esc
, escape
, space
, up
, down
, left
, right
, home
, end
, pageup
, pagedown
, del
, delete
和 f1
通过 f19
。
修饰键查询
在任何时间点(甚至代码比其他快捷键处理), 可以查询key
对于任何按键的状态对象。这可以轻松实现诸如Shift + 单击处理程序。例如,key.shift
是true
如果当前按下Shift键。
if(key.shift) alert('shift is pressed, OMGZ!');
其他关键的查询
在任何时间点(甚至代码比其他快捷键处理), 可以查询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() // returns an array of key codes currently pressed
Scopes
如果你想重复使用相同的快捷键在你的单页应用程序独立的地区, Keymaster支持切换。使用key.setscope
设置范围的方法。
// define shortcuts with a scope key('o, enter', 'issues', function(){ /* do something */ }); key('o, enter', 'files', function(){ /* do something else */ }); // set the scope (only 'all' and 'issues' shortcuts will be honored) key.setScope('issues'); // default scope is '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; }
然而,一个更强大的处理办法是使用适当的 焦点和模糊事件处理程序在您的输入元素,变化范围在您认为合适的。
任何模式
你可以调用key.noconflict
删除key
从全球范围和恢复任何功能key
定义在Keymaster 加载之前。调用key.noconflict
将返回键控key功能。
var k = key.noConflict(); k('a', function() { /* ... */ }); key() // --> TypeError: 'undefined' is not a function
绑定快捷键
类似于定义快捷键,它们可以自由使用key.unbind
。
// unbind 'a' handler key.unbind('a'); // unbind a key only for a single scope // when no scope is specified it defaults to the current scope (key.getScope()) key.unbind('o, enter', 'issues'); key.unbind('o, enter', 'files');
CoffeeScript
如果你使用CoffeeScript配置快捷键,简单得不能再简单了:
key 'a', -> alert('you pressed a!') key '⌘+r, ctrl+r', -> alert 'stopped reload!' off key 'o, enter', 'issues', -> whatevs() alert 'shift is pressed, OMGZ!' if key.shift
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论