TypeScript(TS) 自定义绑定快捷键

本文主要是介绍TypeScript(TS) 自定义绑定快捷键，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

有很多软件中都可以让用户自定义快捷键

如微信中的快捷键：

思路：

1. 将快捷键分为两部分：

a. 主要的键 'shift', 'ctrl', 'alt', 'command'；

b. 非主要的键字母键、数字键等；

2. 键盘按下事件：比较按键和绑定的快捷键是否相同

代码实现


/*** 快捷键信息对象*/
interface Shortcuts {// 快捷键readonly shortcut:string;// 名称readonly name: string;// 执行的方法readonly callback:Function,// 字母键readonly key: string,// 主组合键readonly modifiers: string[],
}const KEY_SHORTCUT = ['shift', 'ctrl', 'alt', 'command'];/*** 快捷键*/
export default class ShortcutBinder {// 存放快捷键信息的集合private readonly shortcuts:Shortcuts[];// 新快捷键  --->   默认快捷键private readonly defaultShortcutsMap: Map<string, string> = new Map<string, string>();private readonly defaultShortcuts:Shortcuts[];private static shortcutBinder:ShortcutBinder;// 单例public static getInstance(){if (!ShortcutBinder.shortcutBinder){ShortcutBinder.shortcutBinder = new ShortcutBinder()}return ShortcutBinder.shortcutBinder;}private constructor() {this.shortcuts = [];this.defaultShortcuts = [];// 初始化this.init();}private init() {this.addKeydownEvent();}/*** 添加快捷键*/private addKeydownEvent() {// 全局 键盘按下事件document.addEventListener('keydown', (event) => {console.log("按键：", event.keyCode, event.code, event.key)const modifers = getModifierKeysByKeyboardEvent(eventInfo.event);const matchedShortcut = this.shortcuts.find(shortcut =>// 判断字母按键是否相同checkKeyMatch(shortcut.key, event.key.toLowerCase()) &&// 判断非字母按键是否相同checkModifiersMatch(shortcut.modifiers, modifers));if (matchedShortcut !== undefined) {// 执行函数matchedShortcut.callback(event);}});}/*** 绑定默认快捷键和对应执行的方法* @param {string} shortcut* @param {Function} callback*/bind(shortcut:string, name:string, callback:Function) {this.addShortcut(shortcut, name, callback);// 存放默认快捷键this.defaultShortcutsMap.set(shortcut, shortcut);// 克隆默认快捷键this.defaultShortcuts.push(this.shortcuts[this.shortcuts.length-1])}/*** 修改绑定的快捷键* @param newShortcut 新组合键* @param oldShortcut 旧组合键*/editBind(newShortcut:string, oldShortcut:string){if (newShortcut === oldShortcut){// 新键和旧键一致 不做处理return;}let flag = false;// 获取快捷键let shortcutObj:Shortcuts|undefined = undefined;let len = this.shortcuts.length;// 当前位置let c = 0;for (let i = 0; i < len; i++) {if (oldShortcut === this.shortcuts[i].shortcut){shortcutObj = this.shortcuts[i];c = i;}if (newShortcut === this.shortcuts[i].shortcut){// 新快捷键与原有的冲突flag = true;}if (shortcutObj !== undefined && flag){break}}if (flag){// TODO 弹窗提示 快捷键冲突return;}if (shortcutObj === undefined){// TODO 弹窗提示没有该组合键return;}// 添加新的快捷键this.addShortcut(newShortcut, shortcutObj.name, shortcutObj.callback);// 删除原来的快捷键this.shortcuts.splice(c, 1);// 如果 旧快捷键 是默认键添加到映射let shortcutSlt = this.defaultShortcutsMap.get(oldShortcut);if (shortcutSlt !== undefined){// 删除原始的this.defaultShortcutsMap.delete(oldShortcut);// 添加新映射关系this.defaultShortcutsMap.set(newShortcut, shortcutSlt);}}/*** 重置绑定的快捷键* @param shortcut*/resettingBind(shortcut?:string){if (shortcut !== undefined){// 重置一个组合键let oldShortcut = this.defaultShortcutsMap.get(shortcut);if (oldShortcut !== undefined){this.editBind(oldShortcut, shortcut);}return;}// 重置所有组合键this.shortcuts.length = 0;this.defaultShortcuts.forEach(ds => {this.shortcuts.push(ds);})}/*** 获取快捷键集合*/getShortcuts(){return this.shortcuts;}/*** 添加绑定的快捷键* @param {string} shortcut 快捷键* @param {Function} callback 执行的方法*/private addShortcut(shortcut:string, name:string, callback:Function) {this.shortcuts.push({// 快捷键shortcut,// 名称name,// 执行的方法callback,// 字母按键 注意： 字母按键 不区分大小写但event.key区分大小写key: this.getKeyByShortcut(shortcut),// 主按键  'shift', 'ctrl', 'alt', 'command'modifiers: this.getModifiersByShortcut(shortcut),});}/*** 获取字母按键* @param {string} shortcut 快捷键的组合* @returns {string}*/private getKeyByShortcut(shortcut:string) {if (!shortcut.trim()) return '';let key = (shortcut.split('+').filter((key) => !KEY_SHORTCUT.includes(key.trim().toLowerCase()))[0] || '');return key.toLowerCase();}/*** 获取主按键 ['shift', 'ctrl', 'alt', 'command']* @param {string} shortcut 快捷键的组合* @returns {Array}*/private getModifiersByShortcut(shortcut:string) {const keys = shortcut.split('+').map((key) => key.trim().toLowerCase());let modifiers:string[] = [];keys.forEach((key) => {if (KEY_SHORTCUT.includes(key)) {modifiers.push(key);}});return modifiers;}
}/*** 统一主按键* @param {KeyboardEvent} event - keyboard event* @returns {Array}*/
const getModifierKeysByKeyboardEvent = (event:KeyboardEvent) => {const modifiers = [];if (event.shiftKey) {modifiers.push('shift');}if (event.altKey) {modifiers.push('alt');}if (event.ctrlKey) {modifiers.push('ctrl');}if (event.metaKey) {modifiers.push('command');}return modifiers;
};/*** 判断按下的非字母键是否相同* @param {Array} modifers1* @param {Array} modifers2* @returns {boolean}*/
function checkModifiersMatch(modifers1:string[], modifers2:string[]) {return modifers1.sort().join(',') === modifers2.sort().join(',');
}/*** 判断按下的 字母键 是否相同* @param {string} shortcutKey* @param {string} eventKey - event.key* @returns {boolean}*/
function checkKeyMatch(shortcutKey:string, eventKey:string) {return shortcutKey === eventKey;
}

使用方式：

let shortcutBinder = ShortcutBinder.getInstance(this.editCore);// enter 菜单快捷键
shortcutBinder.bind('enter', "快速标记菜单",() => {console.log('enter');
});
shortcutBinder.bind('ctrl+s', '保存', () => {console.log('ctrl+s');
});