美文网首页
vue项目中监听键盘操作 (组合键)

vue项目中监听键盘操作 (组合键)

作者: 小学生的博客 | 来源:发表于2018-01-11 09:13 被阅读182次

监听键盘事件
实现组合键的判断

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() ,就可以监听到了

相关文章

  • vue项目中监听键盘操作 (组合键)

    监听键盘事件实现组合键的判断 ==================遇到的问题。 只能获取到键盘(such as:F...

  • Vue|项目中监听键盘操作(组合键)

    在开发中遇到一个需求,就是用键盘组合键触发事件。 代码如下,注意使用self操作业务,避免对this造成变量污染;

  • WIN系统-快捷键

    常用电脑键盘操作快捷键 Ctrl组合键 Shift组合键 Alt组合键 Win组合快捷键 F组合快捷键 更多组合键...

  • vue监听移动端软件键盘搜索(enter)事件

    vue监听移动端软键盘搜索事件 vue中监听手机键盘的【完成】或【搜索】按钮触发事件,需要两个条件1.form表单...

  • 2019-11-19

    键盘监听事件操作 } 使用:/*** 键盘收起弹出监听,* 如果购物车列表;editText 内容被清空,或者 输...

  • Vue 中的按键别名(.enter)和修饰键(.ctrl)及 组

    1、按键别名 在监听键盘事件时,我们经常需要监测常见的键值。Vue 允许为 v-on 在监听键盘事件时添加关键修饰...

  • 53-Vue-watch属性

    这里主要实现监听数据变化进行某些操作,两种方法对比 一.监听键盘事件 双向数据绑定 添加数据 绑定键盘监听事件 添...

  • 6. Vue 按键修饰符

    在监听键盘事件时,我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。 全部的按...

  • JS监听组合按键

    1.思路 如图,通过监听并打印键盘keydown事件,得到图示内容,观察发现, 当按下的组合键包含Ctrl键时,c...

  • VUE.js学习笔记--vue的各种修饰符

    按键修饰符 在监听键盘事件时,我们经常需要检查详细的按键。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符...

网友评论

      本文标题:vue项目中监听键盘操作 (组合键)

      本文链接:https://www.haomeiwen.com/subject/ercznxtx.html