Vue中键盘监听事件(解决element监听键盘不生效)

Vue监听键盘,直接用@绑定就可以,而且Vue为几个常用的按键提供了别名,不用去查询按键的keyCode
  • 全部的按键别名

.enter
.tab
.delete (捕获“删除”和“退格”键)
.esc
.space
.up
.down
.left
.right

一、input标签绑定esc键

  • <template></template> 中绑定事件

    <input type="text" @keyup.esc="KeyUpEsc">
    
  • <script></script>中定义事件

    KeyUpEsc:function(){
          alert("监听到esc键")
      }
    

实现效果截图

二、使用element组件库的el-input标签,绑定delete键

  • <template></template> 中绑定事件
    <el-input v-model="input" placeholder="请输入内容" @keyup.delete.native="KeyUpDelete"></el-input>
  • 为什么这次绑定事件多一个.native修饰符,这个可能是因为element-ui封装了个div在input标签外面,把原来的事件隐藏了,所以如果不加.native的话,按键不会生效

  • <script></script>中定义事件

     KeyUpDelete :function(){
          alert("监听到delete键")
      },
    

实现效果截图

三、上面两种实现效果是当input标签获取到焦点的时候,才能监听到键盘,下面这种是全局监听enter键,是把监听事件绑定到document上(登录页面常用)

    created: function() {
        var _this = this;
        document.onkeydown = function(e) {
            let key = window.event.keyCode;
            if (key == 13) {
                _this.submit();
            }
        };
    },

    methods: {
        submit: function() {
            alert("监听到enter键");
        },
   }
实现效果截图

这里卿洋
愿喜❤️

推荐阅读更多精彩内容

  • vue.js是什么 是一套构建用户界面的渐进式框架 vue应用组成 一个 Vue 应用由一个通过new Vue创建...
    多多酱_DuoDuo_阅读 229评论 0 2
  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 76,343评论 13 117
  • 主要还是自己看的,所有内容来自官方文档。 介绍 Vue.js 是什么 Vue (读音 /vjuː/,类似于 vie...
    Leonzai阅读 1,572评论 0 22
  • 总结: 鼠标事件 1.click与dbclick事件$ele.click()$ele.click(handler(...
    阿r阿r阅读 772评论 2 9
  • 成长,仿佛就是,越来越不去在乎。 那么多人,儿时的玩伴,一起念书的同学,一起工作的同事,回过头来,还是一个人,一个...
    素白yan阅读 64评论 6 1