Vue中添加针对window的键盘事件该怎么处理

最新推荐文章于 2024-09-24 01:58:55 发布

Dreamer_xr

最新推荐文章于 2024-09-24 01:58:55 发布

阅读量3.2k

点赞数

分类专栏： Vue 原生JavaScript vue2.0进阶笔记文章标签： onkeydown vue 键盘事件

本文链接：https://blog.csdn.net/xr510002594/article/details/82713867

版权

Vue 同时被 3 个专栏收录

44 篇文章 2 订阅

订阅专栏

vue2.0进阶笔记

24 篇文章 6 订阅

订阅专栏

原生JavaScript

13 篇文章 1 订阅

订阅专栏

本文介绍在Vue项目中，由于使用UI库导致input标签无法直接获取焦点，从而无法正常触发键盘事件的问题解决方法。通过在created钩子中定义键盘事件监听器，利用document.onkeydown捕获全局键盘事件，实现对Enter键的响应，提升用户体验。

摘要由CSDN通过智能技术生成

因为在项目中使用了UI库，没有直接的input标签（最终渲染到html上的话，input标签外还有一层div）

 <b-input type="password" v-model="credentials.password" />

所以键盘事件获取不到焦点，在登录页面我想加个键盘enter的全局事件，想提高一点用户体验，于是考虑采用针对window的键盘事件，那么在这个过程中遇到了一个小问题。

其实是this的问题，在回调外面保存一下this就行了。

created(){
  this.keyup()
},
methods:{
  keyup(){ 
    let This = this    //存一下this
    document.onkeydown = function (event) {
      let e = event || window.event || arguments.callee.caller.arguments[0];
      if (e && e.keyCode == 13) {
        This.userLogin()    //调用下面的函数，注意This
      }
    };
  },
  userLogin(){
    //登录
    this.$api.abacus.login(data => {
      window.localStorage.setItem('abacus.token',data.token);
      this.$router.push({name:'schoolManage'});
    }, this.credentials);
  }
}

然后键盘事件就能用了，对于找不到焦点的问题，我觉得还应该有其余的方法，在这里直接用了window的键盘事件。