HotKeys.js 使用心得官网 https://wangchujiang.com/hotkeys-js/ githu

官网

wangchujiang.com/hotkeys-js/

github地址

github.com/jaywcjlove/…

Hotkeys.js 是一个用于处理键盘快捷键的JavaScript库。以下是 Hotkeys.js 的一些常用 API：

hotkeys(key, options, callback)：
- 用于注册键盘快捷键。
- key 参数是一个字符串，表示要注册的快捷键，可以包含多个按键，如 "ctrl+a"。
- options 参数是一个对象，用于配置快捷键的额外选项。
- callback 参数是一个回调函数，当快捷键被触发时调用。
示例：
```
hotkeys('ctrl+a', function(event, handler) {
    // 处理快捷键触发的逻辑
    console.log('Ctrl + A pressed');
});
```
unregister(key)：
- 用于注销已注册的快捷键。
- key 参数是一个字符串，表示要注销的快捷键。
示例：
```
unregister('ctrl+a');
```
get(key)：
- 获取已注册快捷键的详细信息。
- key 参数是一个字符串，表示要获取信息的快捷键。
示例：
```
var keyInfo = get('ctrl+a');
console.log(keyInfo);
```
setScope(scopeName)：
- 设置当前作用域，用于限定快捷键的范围。
- scopeName 参数是一个字符串，表示作用域的名称。
示例：
```
setScope('myScope');
```

getScope()：

获取当前的作用域名称。

示例：

var currentScope = getScope();
console.log('Current Scope:', currentScope);

deleteScope(scopeName)：
- 删除指定名称的作用域及其相关的快捷键。
示例：
```
deleteScope('myScope');
```
noConflict()：
- 释放 Hotkeys.js 控制的全局变量 $，以避免与其他库发生冲突。
示例：
```
var hotkeys = Hotkeys.noConflict();
```

以上是 Hotkeys.js 的一些主要 API。你可以根据你的具体需求，查阅官方文档以获取更详细的信息和示例。

支持的按键

HotKeys 支持以下修饰符：⇧、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、 num_0 到 num_9、num_multiply、num_add、num_enter、num_subtract、num_decimal、num_divide。

⌘ Command() ⌃ Control ⌥ Option(alt) ⇧ Shift ⇪ Caps Lock(Capital) ~~fn Does not support fn~~ ↩︎ return/Enter space

使用示例

hotkeys('f5', function(event, handler) {
  // Prevent the default refresh event under WINDOWS system
  event.preventDefault();
  alert('you pressed F5!');
});

// Returning false stops the event and prevents default browser events
// Mac OS system defines `command + r` as a refresh shortcut
hotkeys('ctrl+r, command+r', function() {
  alert('stopped reload!');
  return false;
});

// Single key
hotkeys('a', function(event,handler){
  //event.srcElement: input
  //event.target: input
  if(event.target === "input"){
      alert('you pressed a!')
  }
  alert('you pressed a!')
});

// Key Combination
hotkeys('ctrl+a,ctrl+b,r,f', function (event, handler){
  switch (handler.key) {
    case 'ctrl+a': alert('you pressed ctrl+a!');
      break;
    case 'ctrl+b': alert('you pressed ctrl+b!');
      break;
    case 'r': alert('you pressed r!');
      break;
    case 'f': alert('you pressed f!');
      break;
    default: alert(event);
  }
});

hotkeys('ctrl+a+s', function() {
    alert('you pressed ctrl+a+s!');
});

// Using a scope
hotkeys('*','wcj', function(event){
  console.log('do something', event);
});

基于Vue3 hooks封装

import hotkeys from 'hotkeys-js';
import { onMounted, onUnmounted } from 'vue';

const useHotKey = (keys, callback) => {
  onMounted(() => {
    hotkeys(keys, callback);
  });
  onUnmounted(() => {
    hotkeys.unbind(keys, callback);
  });
};

export default useHotKey;

常用场景

注意，有的地方，需要考虑mac电脑的快捷键！

翻页

function initHotkey() {
  useHotKey('a,w,up,left', getPrevItem);
  useHotKey('s,d,down,right', getNextItem);
}

// 注册键盘事件
initHotkey();

删除

useHotKey('del', deleteLabelBoxGroup);

查看

useHotKey('v', handleEditImageAndLabel);

撤销恢复

useHotKey('ctrl+z,command+z', undo);
useHotKey('ctrl+y,command+y,ctrl+shift+z,command+shift+z', redo);