KeyboardJS 捕捉键盘快捷键事件插件

  • Z时代
  • 2024-01-10
  • 分类：IT

KeyboardJS 是一个非常实用的插件，使用这个类库你可以很方便的捕捉输入键的组合，可以帮助你很好的添加相关快捷键的操作事件。

KeyboardJS 捕捉键盘快捷键事件插件

简介

KeyboardJS 是使用浏览器中的库（和Node.js兼容）。它允许开发人员轻松地设置密钥绑定。使用键连击设置复杂的绑定。KeyboardJS还提供了上下文。上下文是伟大的单页应用。

它们允许您将绑定到应用程序的各个部分的范围内。开箱 KeyboardJS 使用我们的键盘区域。如果你需要一个不同类型的键盘KeyboardJS支持提供定制的现场支持，你可以用一个更好的匹配你的需要创建现场。

KeyboardJS 可用于 browserify NPM 模块（或 Node.js）。如果你不使用 browserify 你可以只包括在回购 dist 文件夹 keyboard.js 或 keyboard.min.js 。这些文件是UMD包就可以使用或不如requireJS 模块加载器。

npm install keyboardjs

如果你正在寻找以前的v1.x.x版本，你可以在这里找到。

设置和绑定很简单

keyboardJS.bind('a', function(e) {
  console.log('a is pressed');
});
keyboardJS.bind('a + b', function(e) {
  console.log('a and b is pressed');
});
keyboardJS.bind('a + b > c', function(e) {
  console.log('a and b then c is pressed');
});
keyboardJS.bind(['a + b > c', 'z + y > z'], function(e) {
  console.log('a and b then c or z and y then z is pressed');
});
// keyboardJS.bind === keyboardJS.on === keyboardJS.addListener

按下和弹起

keyboardJS.bind('a', function(e) {
  console.log('a is pressed');
}, function(e) {
  console.log('a is released');
});
keyboardJS.bind('a', null, function(e) {
  console.log('a is released');
});

阻止按下重复

keyboardJS.bind('a', function(e) {
  // this function will once run once even if a is held
  e.preventRepeat();
  console.log('a is pressed');
});

取消绑定的事件

keyboardJS.unbind('a', previouslyBoundHandler);
// keyboardJS.unbind === keyboardJS.off === keyboardJS.removeListener

使用上下文

  // these will execute in all contexts
keyboardJS.bind('a', function(e) {});
keyboardJS.bind('b', function(e) {});
keyboardJS.bind('c', function(e) {});
// these will execute in the index context
keyboardJS.setContext('index');
keyboardJS.bind('1', function(e) {});
keyboardJS.bind('2', function(e) {});
keyboardJS.bind('3', function(e) {});
// these will execute in the foo context
keyboardJS.setContext('foo');
keyboardJS.bind('x', function(e) {});
keyboardJS.bind('y', function(e) {});
keyboardJS.bind('z', function(e) {});
// if we have a router we can activate these contexts when appropriate
myRouter.on('GET /', function(e) {
keyboardJS.setContext('index');
});
myRouter.on('GET /foo', function(e) {
keyboardJS.setContext('foo');
});
// you can always figure out your context too
var contextName = keyboardJS.getContext();
// you can also set up handlers for a context without losing the current context
keyboardJS.withContext('bar', function() {
// these will execute in the bar context
keyboardJS.bind('7', function(e) {});
keyboardJS.bind('8', function(e) {});
keyboardJS.bind('9', function(e) {});
});

暂停/恢复/重置

// the keyboard will no longer trigger bindings
keyboardJS.pause();
// the keyboard will once again trigger bindings
keyboardJS.resume();
// all active bindings will released and unbound,
// pressed keys will be cleared
keyboardJS.reset();

按下/释放/释放所有按键

// pressKey
keyboardJS.pressKey('a');
// or
keyboardJS.pressKey(65);
// releaseKey
keyboardJS.releaseKey('a');
// or
keyboardJS.releaseKey(65);
// releaseAllKeys
keyboardJS.releaseAllKeys();

监听和停止

// bind to the window and document in the current window
keyboardJS.watch();
// or pass your own window and document
keyboardJS.watch(myDoc);
keyboardJS.watch(myWin, myDoc);
// or scope to a specific element
keyboardJS.watch(myForm);
keyboardJS.watch(myWin, myForm);
// detach KeyboardJS from the window and document/element
keyboardJS.stop();

Key Binding

KeyboardJS.on('a', function() {
    console.log('you pressed a!');
});
*** User presses 'a'
>>> 'you pressed a!'
*** User releases 'a'

Key Combo Binding

KeyboardJS.on('ctrl + m', function() {
    console.log('ctrl m!');
});
//note the user can press the keys in any order
*** User presses 'ctrl' and 'm'
>>> 'ctrl m!'
*** User releases 'ctrl' and 'm'

Ordered Combo Binding

KeyboardJS.on('ctrl > m', function() {
    console.log('ctrl m!');
});
*** User presses 'ctrl'
*** User presses 'm'
>>> 'ctrl m!'
*** User releases 'ctrl' and 'm'
//if the keys are pressed in the wrong order the binding will not be triggered
*** User presses 'm'
*** User presses 'ctrl'
*** User releases 'm' and 'ctrl'

Overlap Prevention

KeyboardJS.on('ctrl > m', function() {
    console.log('ctrl m!');
});
KeyboardJS.on('shift + ctrl > m', function() {
    console.log('shift ctrl m!');
});
*** User presses 'ctrl'
*** User presses 'm'
>>> 'ctrl m!'
*** User releases 'ctrl' and 'm'
//note that shift ctrl m does not trigger the ctrl m binding
*** User presses 'shift' and 'ctrl'
*** User presses 'm'
>>> 'shift ctrl m!'
*** User releases 'shift', 'ctrl' and 'm'

公共方法

KeyboardJS.on

KeyboardJS.on(string keyCombo[, function onDownCallback[, function onUpCallback]]) => object binding

Binds any key or key combo. See ‘keyCombo’ definition below for details. The onDownCallback is fired once the key or key combo becomes active. The onUpCallback is fired when the combo no longer active (a single key is released).

Both the onDownCallback and the onUpCallback are passed three arguments. The first is the key event, the second is the keys pressed, and the third is the key combo string.

返回

Returns an object containing the following methods.

  • clear() – Removes the key or key combo binding.

  • on() – Allows you to bind to the keyup and keydown event of the given combo. An alternative to adding the onDownCallback and onUpCallback.

KeyboardJS.activeKeys

KeyboardJS.activeKeys() => array activeKeys

Returns an array of active keys by name.

KeyboardJS.clear

KeyboardJS.clear(string keyCombo)

Removes all bindings with the given key combo. See ‘keyCombo’ definition for more details.

Please note that if you are just trying to remove a single binding should use the clear method in the object returned by KeyboardJS.on instead of this. This function is for removing all binding that use a certain key.

KeyboardJS.clear.key

KeyboardJS.clear.key(string keyCombo)

Removes all bindings that use the given key.

KeyboardJS.locale

KeyboardJS.locale([string localeName]) => string localeName

Changes the locale keyboardJS uses to map key presses. Out of the box KeyboardJS only supports US keyboards, however it is possible to add additional locales via KeyboardJS.locale.register().

KeyboardJS.locale.register

KeyboardJS.locale.register(string localeName, object localeDefinition)

Adds new locale definitions to KeyboardJS.

KeyboardJS.macro

KeyboardJS.macro(string keyCombo, array keyNames)

Accepts a key combo and an array of key names to inject once the key combo is satisfied.

KeyboardJS.macro.remove

KeyboardJS.macro.remove(string keyCombo)

Accepts a key combo and clears any and all macros bound to that key combo.

KeyboardJS.key.name

KeyboardJS.key.name(number keyCode) => array keyNames

Accepts a key code and returns the key names defined by the current locale.

KeyboardJS.key.code

KeyboardJS.key.code(string keyName) => number keyCode

Accepts a key name and returns the key code defined by the current locale.

KeyboardJS.combo.parse

KeyboardJS.combo.parse(string keyCombo) => array keyComboArray

Parses a key combo string into a 3 dimensional array.

  • Level 1 – sub combos.

  • Level 2 – combo stages. A stage is a set of key name pairs that must be satisfied in the order they are defined.

  • Level 3 – each key name to the stage.

KeyboardJS.combo.stringify

KeyboardJS.combo.stringify(array keyComboArray) => string KeyCombo

Stringifys a parsed key combo.

KeyboardJS.pressKey

KeyboardJS.pressKey(string keyName)

Add an active key to an array of active keys by name.

KeyboardJS.releaseKey

KeyboardJS.releaseKey(string keyName)

Removes an active key from an array of active keys by name.

自定义快捷键

keyCombo

A string containing key names separated by whitespace, >, +, and ,.

  • ‘a’ – binds to the ‘a’ key. Pressing ‘a’ will match this keyCombo.

  • ‘a, b’ – binds to the ‘a’ and ‘b’ keys. Pressing either of these keys will match this keyCombo.

  • ‘a + b’ – binds to the ‘a’ and ‘b’ keys. Pressing both of these keys will match this keyCombo.

  • ‘a + b, c + d’ – binds to the ‘a’, ‘b’, ‘c’ and ‘d’ keys. Pressing either the ‘a’ key and the ‘b’ key, or the ‘c’ and the ‘d’ key will match this keyCombo.

localeDefinitions

An object that maps keyNames to their keycode and stores locale specific macros. Used for mapping keys on different locales.

{
    "map": {
        "65": ["a"],
        "66": ["b"],
        ...
    },
    "macros": [
        ["shift + `", ["tilde", "~"]],
        ["shift + 1", ["exclamation", "!"]],
        ...
    ]
}

多语言支持

KeyboardJS can support any locale, however out of the box it just comes with the US locale (for now..,). Adding a new locale is easy. Map your keyboard to an object and pass it to KeyboardJS.locale.register(‘myLocale’, {/localeDefinition/}) then call KeyboardJS.locale(‘myLocale’).

If you create a new locale please consider sending me a pull request or submit it to the issue tracker so I can add it to the library.

相关链接

  • Github地址：https://github.com/RobertWHurst/KeyboardJS

以上是 KeyboardJS 捕捉键盘快捷键事件插件 的全部内容， 来源链接： utcz.com/p/232356.html

回到顶部