keyboardListener

用于监听页面键盘事件

下载

npm i keyboard-listener -S
# or
yarn add keyboard-listener

语法

# 全局注册表中的监听事件
register(
    eventName: string,
    callback: () => any,
    element?: HTMLElement,
    isAutoFocusEl?: boolean
):KeyboardListener
# 单独监听, 如果全局注册表中有改事件, 则覆盖
add(compositionKeys: string, eventName: string, callback: () => any, element?: HTMLElement, isAutoFocusEl?: boolean):KeyboardListener
# 销毁事件
remove(eventName: string|string[], compositionKeys?: string):KeyboardListener

参数

eventname

• 事件名称, 全局注册表下的不可重复.

callback

• 事件回调

compositionKeys

• 组合键名称, 使用了改参数就不能再全局注册该事件名

element

• 元素注册
• 元素需要设置属性tabindex = -1

isAutoFocusEl

• 是否聚焦该元素, 默认聚焦

在Vue中使用

方式1: 全局注册

// main.js
import KeyboardListener from 'keyboard-listener';
Vue.prototype.$key = new KeyboardListener({
  type: 'keydown', // 非必填
  logger: false, // todo
  register: {
    'Alt+S': ['handleTreatSubmit']
  }
})

// vue单文件
created() {
    this.$key.register('handleTreatSubmit', () => {
      console.log('处置治疗保存', new Date());
      this.handleSubmit();
    })
},
beforeDestroy() {
    console.log('>>>treat beforeDestroy>>>');
    // 销毁
    this.$key.remove('handleTreatSubmit');
},
methods: {
    # 最好加上防抖
    @_debounce(300, {leading:true,trailing:false})
    handleSubmit(){}
}

/**
 * 函数防抖装饰器
 * @param {number} wait 需要延迟的毫秒数。
 * @param {Object} options 选项对象
 * [options.leading=false] (boolean): 指定在延迟开始前调用。
 * [options.maxWait] (number): 设置 func 允许被延迟的最大值。
 * [options.trailing=true] (boolean): 指定在延迟结束后调用。
 */
export const _debounce = function(wait, options = {}) {
  return function(target, name, descriptor) {
    descriptor.value = debounce(descriptor.value, wait, options);
  };
};

方式2: 单独注册

// vue单文件
created() {
    this.$key.add('Alt+S', 'handleTreatSubmit', () => {...});
},
beforeDestroy(){
	this.$key.remove('handleTreatSubmit', 'Alt+S');
}

元素中注册

在 <inputs>, <textarea> 以及任何具有 contentEditable 或 tabindex="-1"属性的组件中注册键盘事件

设置style="outline:none"清除默认黑边

开发中需要在非输入框元素上添加tabindex='-1'的属性

如果添加了el-button或者原生click事件开启弹框, 需要清除click选中状态

mounted() {
    // 方式1
    this.key.register('input', () => {
          console.log(this.msg);
    }, '#input');

    // 方式2
    this.key.add('Enter', 'input', () => {
          console.log(this.msg);
    }, '#input');
},
beforeDestroy() {
  this.key.remove(['input']);
}

el-button失焦快捷指令

import Vue from "vue";

Vue.directive("blur", {
  bind(el, binding) {
    // @ts-ignore
    el.handler = (e: EventEmitter) => {
      el.blur();
      e.target.blur();
      binding.value(e);
    };
    // @ts-ignore
    el.addEventListener("click", el.handler);
  },
  unbind(el) {
    // @ts-ignore
    el.removeEventListener("click", el.handler);
  },
});

事件名规范

• 单键
  • 比如'Ctrl', 'A', F5
• 组合键
  • 比如'Ctrl+S', 'Ctrl+A', 'Alt+S', 'Shift+S'
• 三个组合键, 按照顺序Ctrl,Shift,Alt
  • 比如'Ctrl+Shift+A','Ctrl+Alt+S'

键盘码

| 字母和数字键的键码值(keyCode) | | | | | | | | | ----------------------------- | ---- | ---- | ---- | ---- | ---- | ---- | ---- | | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 | | A | 65 | J | 74 | S | 83 | 1 | 49 | | B | 66 | K | 75 | T | 84 | 2 | 50 | | C | 67 | L | 76 | U | 85 | 3 | 51 | | D | 68 | M | 77 | V | 86 | 4 | 52 | | E | 69 | N | 78 | W | 87 | 5 | 53 | | F | 70 | O | 79 | X | 88 | 6 | 54 | | G | 71 | P | 80 | Y | 89 | 7 | 55 | | H | 72 | Q | 81 | Z | 90 | 8 | 56 | | I | 73 | R | 82 | 0 | 48 | 9 | 57 |

| 数字键盘上的键的键码值(keyCode) | 功能键键码值(keyCode) | | | | | | | | ------------------------------- | --------------------- | ----- | ---- | ---- | ---- | ---- | ---- | | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 | | 0 | 96 | 8 | 104 | F1 | 112 | F7 | 118 | | 1 | 97 | 9 | 105 | F2 | 113 | F8 | 119 | | 2 | 98 | * | 106 | F3 | 114 | F9 | 120 | | 3 | 99 | + | 107 | F4 | 115 | F10 | 121 | | 4 | 100 | Enter | 108 | F5 | 116 | F11 | 122 | | 5 | 101 | - | 109 | F6 | 117 | F12 | 123 | | 6 | 102 | . | 110 | | | | | | 7 | 103 | / | 111 | | | | |

| 控制键键码值(keyCode) | | | | | | | | | --------------------- | ---- | ---------- | ---- | ----------- | ---- | ---- | ---- | | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 | 按键 | 键码 | | BackSpace | 8 | Esc | 27 | Right Arrow | 39 | -_ | 189 | | Tab | 9 | Spacebar | 32 | Down Arrow | 40 | .> | 190 | | Clear | 12 | Page Up | 33 | Insert | 45 | /? | 191 | | Enter | 13 | Page Down | 34 | Delete | 46 | `~ | 192 | | Shift | 16 | End | 35 | Num Lock | 144 | [{ | 219 | | Ctrl/Control | 17 | Home | 36 | ;: | 186 | /| | 220 | | Alt | 18 | Left Arrow | 37 | =+ | 187 | ]} | 221 | | Cape Lock | 20 | Up A | | | | | |

mac相关键映射: TODO

| window | mac | | ------ | ------- | | Ctrl | Control | | Ctrl | ⌃ | | Shift | ⇧ | | Alt | Option | | Alt | ⌥ | | 暂无 | ⌘ | | 暂无 | Command |