监听键盘按键方法

背景:

使用一些快捷按键来触发页面的一些功能按钮点击事件
( 以下示例: VUE 项目 )

封装方法:

键盘监听方法

export const KeyBoardStart = ({
  KeyAry = [],
  preventDefault = false
}) => {
  document.onkeydown = function(event) {
    preventDefault && event.preventDefault();
    if (KeyAry.length) {
      // 获取按键触发得到的相关数据
      const {
        key:_key,
        code:_code,
        keyCode:_keyCode,
        altKey:_altKey,
        shiftKey:_shiftKey,
        ctrlKey:_ctrlKey,
        metaKey:_metaKey
      } = event

      KeyAry.map((item) => {
        if ((item.key && item.key.length > 0 && item.key.indexOf(_key) !== -1) ||
            (item.code && item.code.length > 0 && item.code.indexOf(_code) !== -1) ||
            (item.keyCode && item.keyCode.length > 0 && item.keyCode.indexOf(_keyCode) !== -1)) {

          let _alt = false, _shift = false, _ctrl = false, _meta = false;
          if ('assist' in item) {
            const _assist = item.assist
            _alt = Boolean(_assist.indexOf('alt') !== -1)
            _shift = Boolean(_assist.indexOf('shift') !== -1)
            _ctrl = Boolean(_assist.indexOf('ctrl') !== -1)
            _meta = Boolean(_assist.indexOf('meta') !== -1)
          }

          if ((_alt === _altKey) && (_shift === _shiftKey) && (_ctrl === _ctrlKey) && (_meta === _metaKey)) {
            item.callback && item.callback()
          }
        }
      })
    }
  }
}

调用方法 及 说明

/**
  KeyAry: [{              // key:[]  code:[]  keyCode:[]  三选一填写即可
    key: [],              // 按键的 key;
    code: [],             // 标识按下的具体是哪个物理键，键盘上每一个按键都对应一个唯一的值
    keyCode: [],          // 按键的键码值
    assist: [],           // 辅助按键值(例如:alt ctrl meta shift), 不需要辅助键则无需填写, 辅助键数组内的值是 and 关系;
    callback: ()=>{},     // 回调方法
  }, {}, ...],
  preventDefault: false,  // 是否阻止浏览器按键默认事件, 默认不阻止; 例如: 设置为 true; 则按下 ctrl + S 不会触发浏览器保存页面事件
*/

// 调用键盘监听, 可以同时设置多个键 或者 组合键 监听
KeyBoardStart({
  KeyAry: [
    // 监听回车按键
    { key: ['Enter'], callback: () => callBackFunctionName() },
    // 监听 ctrl + A(a)  组合按键
    { keyCode: [65], assist:['ctrl'], callback: () => callBackFunctionName() }
  ]
})

1. !!!如果页面调用了键盘按键监听, 页面销毁前 需要调用 关闭监听的方法!!!
2. assist 辅助按键值(例如:alt ctrl meta shift), 不需要辅助键则无需填写, 辅助键数组内的值是 and 关系

销毁键盘监听

export const KeyBoardEnd = () => {
  document.onkeydown = null
}

销毁键盘监听调用方法
beforeDestroy() { KeyBoardEnd() }