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

在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.handleWatchEnter);
  },
  methods: {
    handleWatchEnter(e) {
      var key = window.event ? e.keyCode : e.which;
      console.log(key);
      if (key === 13) {
        // 这里执行相应的行为动作
        console.log('++++');
      }
    },

以下是键盘上各个案件对应的数值，以及vue键盘事件的写法：

 vue中的扣键盘事件：
@keydown （键盘按下时触发）；

@keypress（按键按住时触发）；

@keyup（键盘弹起）；

获取按键的键码 e.keyCode；

@keyup.13  按回车键；

@keyup.enter  回车；

@keyup.up  上键；

@keyup.down  下键；

@keyup.left  左键；

@keyup.right  右键；

@keyup.delete  删除键；

最后

以上就是淡定黑裤为你收集整理的在vue项目当中绑定键盘事件的全部内容，希望文章能够帮你解决在vue项目当中绑定键盘事件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。