注册快捷键（单快捷键、组合快捷键）

一、注册快捷键方法

window.addEventListener('keydown', onWindowKeyDown, false);
window.addEventListener('keyup', onWindowKeyUp, false);

注意：addEventListener在组建销毁的时候也需要销毁

eg：react+hooks

  useEffect(() => {
    window.addEventListener('keydown', onWindowKeyDown, false);
    window.addEventListener('keyup', onWindowKeyUp, false);
    return (() => {
      window.removeEventListener('keydown', onWindowKeyDown, false);
      window.removeEventListener('keyup', onWindowKeyUp, false);
    })
  }, [])

二、区分mac和windows快捷键

1、从UA中获取相关数据来判定是mac系统

let isMac = /Mac OS X/ig.test(navigator.userAgent);

2、mac和windows组合键和单快捷键操作

@see:

isMac: 判断是否是mac电脑

evt: 系统事件对象，如果使用了typescript，参数可以设置成evt: KeyboardEvent

evt.metaKey: 准备使用组合键，按下了metaKey，distinguishKeyBoardEvent方法下面讲

!evt.metaKey: 不使用快捷键，单键直接触发快捷功能

如果是windows，同理换成evt.ctrlKey,如下

function onWindowKeyDown (evt) {
    if (isMac) {
       if (evt.metaKey) {
            distinguishKeyBoardEvent(evt);
       }
       if (!evt.metaKey) publicKeyboardShortcuts(evt); //单快捷键操作
    } else {
       if (evt.ctrlKey) {
            distinguishKeyBoardEvent(evt);
       }
       if (!evt.ctrlKey) publicKeyboardShortcuts(evt);
    }
}

3、上面的组合键  distinguishKeyBoardEvent 方法定义

注：下面function(){ //doSomething } 是按下快捷键之后的主要逻辑

function distinguishKeyBoardEvent (evt) {
    const actions = new Map([
      [{keyCode: 'z'}, () => function(){//doSomething}],
      [{keyCode: 'y'}, () => function(){//doSomething}],
    ]);
    let action = [...actions].filter(([key, value]) => (key.keyCode == evt.key));
    action.forEach(([key, value]) => {
      value.call(window); //执行方法function(){//doSomething}
      evt.stopPropagation();
      evt.cancelBubble = true
    });
}

4、上面的单快捷键 publicKeyboardShortcuts 方法定义

注：下面doing(){ } 是按下快捷键之后的主要逻辑

function publicKeyboardShortcuts (evt) {
    const actions = new Map([
      [{keyCode: 'p'}, () => doing()],
      [{keyCode: 'c'}, () => doing()],
      [{keyCode: 't'}, () => doing()],
      [{keyCode: 's'}, () => doing()],
      [{keyCode: 'e'}, () => doing()],
      [{keyCode: 'v'}, () => doing()],
      [{keyCode: 'q'}, () => doing()],
    ]);
    let action = [...actions].filter(([key, value]) => (key.keyCode == evt.key));
    action.forEach(([key, value]) => value.call(window)); //执行doing方法
}

function doing() {
    //doSomething
}

注意：如果有单快捷键，这时候要注意输入框，如果需要在输入框中书写内容，就不能触发快捷键操作，如下可以return掉

if (["INPUT", "TEXTAREA"].includes((evt.target as HTMLElement).nodeName)) return;

 

交流

对前端技术保持学习爱好者。我会经常分享自己所学所看的干货，在进阶的路上，共勉！欢迎关注公众号共同学习。