doubleyong
管理员
管理员
  • 最后登录2026-05-10
  • 发帖数1198
  • 最爱沙发
  • 喜欢达人
  • 原创写手
  • 社区居民
  • 忠实会员
阅读:7508回复:0

[Vue]vue 判断组合键keyup/keydown

楼主#
更多 发布于:2019-06-26 14:46
vue中如何组合键被按
如果是功能键(ctrl,alt,shift)+字母

function (e) {
   if(e.key=="z" && e.ctrlKey==true){
  }
}
通过上面的代码即可实现.

如果,是包括多个字母键,就不能像上面这么写,需要用一个变量来做开头,进行判断,如下:

created() {
      let self = this;
      let code = 0
      let code2 = 0
      document.onkeydown = function (e) {
        let evn = e || event;
        let key = evn.keyCode || evn.which || evn.charCode;
        // F2 
        if (key === 113) {
           ......
        }
        //F5
        if (key === 116) {
          e.preventDefault() //禁止默认事件
          ......
        }
        //  c
        if (key === 67) {
          code2 = 1
        }
        //  j
        if (key === 74) {
          code2 = 2
        }
        //  alt
        if (key === 18) {
          code = 1
        }
        // Alt + C   
        if (code === 1 && code2 === 1) {
          ......
        }
        // Alt+ j
        if (code === 1 && code2 === 2) {
         ......
        }
      }
      // keyup时及时的 归零
      document.onkeyup = function (e) {
        if (e.keyCode === 67) {
          code2 = 0;
        }
        if (e.keyCode === 18) {
          code = 0;
        }
        if (e.keyCode === 74) {
          code2 = 0;
        }
        if (e.keyCode === 88) {
          code2 = 0;
        }
      }
    },
==================
遇到的问题

  • 只能获取到键盘(such as:F10)的keydown事件,不能获取到keyup事件。
    WTF
    原来是忘了禁止按键的默认事件了。
    加上 e.preventDefault() ,就可以监听到了
参考:https://blog.csdn.net/weixin_33991727/article/details/87783424
知识需要管理,知识需要分享
游客


返回顶部

公众号

公众号