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

朱雀 2022-10-22 10:45 374阅读 0赞

在vue项目当中，有时会遇到为文本输入框或者button按钮绑定键盘事件，最常见的就是enter回车事件。

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

v-on:keyup.enter

简写：

@keyup.enter

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

<el-input
              v-focus
              :placeholder="$t('enterPoolName')"
              v-model.trim="strPool"
              :maxlength="100"
              @keyup.enter.native="handleSearchMember"
            >
              <i slot="prefix" class="el-input__icon el-icon-search"></i>
            </el-input>

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

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

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

mounted() {
        const that = this;
        document.addEventListener('keydown', that.watchEnter);
      },
      methods: {
        handleWatchEnter(e) {
          var key = window.event ? e.keyCode : e.which;
          console.log(key);
          if (key === 13) {
            // 这里执行相应的行为动作
            console.log('++++');
          }
        },
    }

最后附上键盘上各个按键对应的数值，以及vue键盘事件的写法：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70][]

vue中的扣键盘事件

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

获取按键的键码 e.keyCode

@keyup.13     按回车键

@keyup.enter 回车

@keyup.up    上键

@keyup.down  下键

@keyup.left     左键

@keyup.right    右键

@keyup.delete    删除键

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3NpbmF0XzM2NzI4NTE4_size_16_color_FFFFFF_t_70]: /images/20221022/08c38fee930f4a3e949076c916fdcba5.png