去评论
dz插件网

详解在vue项目当中绑定键盘事件

逝水年华
2022/06/29 16:53:56
在vue项目当中，有时会遇到为文本输入框或者button按钮绑定键盘事件，最常见的就是enter回车事件。

按照vue官网给出的方法是：

v-on:keyup.enter

简写：

@keyup.enter

如果是绑定在组件上的话，需要加native修饰符

[HTML]  
  1. <el-input
  2.           v-focus
  3.           :placeholder="$t('enterPoolName')"
  4.           v-model.trim="strPool"
  5.           :maxlength="100"
  6.           @keyup.enter.native="handleSearchMember"
  7.         >
  8.           <i slot="prefix" class="el-input__icon el-icon-search"></i>
  9.         </el-input>


但是，这种方式只能是在获取焦点的时候起作用，如果失去焦点，则无法执行键盘事件。

如果，项目有需求在失去焦点的时候，仍然能够执行相应的键盘事件，完成既定的行为动作，诸如提交表单登录等等。

那就需要采取常规的方法，将键盘事件绑定在document文档上，然后通过获取键盘上各个按键的值，进行键盘事件的执行响应。

[JavaScript]  
  1. mounted() {
  2.     const that = this;
  3.     document.addEventListener('keydown', that.handleWatchEnter);
  4.   },
  5.   methods: {
  6.     handleWatchEnter(e) {
  7.       var key = window.event ? e.keyCode : e.which;
  8.       console.log(key);
  9.       if (key === 13) {
  10.         // 这里执行相应的行为动作
  11.         console.log('++++');
  12.       }
  13.     },
  14. }



vue中的扣键盘事件

@keydown（键盘按下时触发），@keypress(键盘按住时触发)，@keyup(键盘弹起)

获取按键的键码 e.keyCode

@keyup.13     按回车键

@keyup.enter 回车

@keyup.up    上键

@keyup.down  下键

@keyup.left     左键

@keyup.right    右键

@keyup.delete    删除键
进入原文参与互动