Keymaster.js 快速绑定键盘操作的 JavaScript 库

发布于 2018-12-12 22:09:58 字数 4757 浏览 2905 评论 0

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, deletef1 通过 f19

修饰键查询

在任何时间点(甚至代码比其他快捷键处理), 可以查询key对于任何按键的状态对象。这可以轻松实现诸如Shift + 单击处理程序。例如,key.shifttrue如果当前按下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, SELECTTEXTAREA元素集中,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

https://github.com/madrobby/keymaster

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84960 人气
更多

推荐作者

qq_Yqvrrd

文章 0 评论 0

2503248646

文章 0 评论 0

浮生未歇

文章 0 评论 0

养猫人

文章 0 评论 0

第七度阳光i

文章 0 评论 0

新雨望断虹

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文