当前位置: 首页 > 工具软件 > Keymaster.js > 使用案例 >

keymaster.js的使用(监听键盘按键的插件,最详细的官方文档)

班宏毅
2023-12-01

Keymaster是一个简单的微型库,用于在Web应用程序中定义和分派键盘快捷键。

它没有依赖关系。

用法

包含keymaster.js在您使用之前引入,照常加载:

< script src = keymaster.js > < / script

Keymaster没有依赖关系,可以完全独立使用。它不依赖于任何JavaScript库或框架。

*最好使用适合您工作流程的压缩版本。您可以运行makeUglifyJS(如果已安装)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可以支持识别以下组合键: shiftoptionaltctrlcontrolcommand,和

以下特殊键可以识别为普通键:backspace、tab、clear、enter、return、esc、escape、space、up、down、left、right、home、end、pageup、pagedown、del、delete和f1到f19。

修饰符键(组合键)查询

在任何时间点(即使在键快捷键处理程序以外的代码中),您也可以在key对象中查询任何键的状态。这样可以轻松实现shift + click处理程序等功能。例如, key.shifttrue的话那么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' 

过滤按键

默认情况下,当一个INPUTSELECTTEXTAREA标签的聚焦时,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 ) $ / .testtagName'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 ')  ;

 

 类似资料: