@shmao/keyboardlistener

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