Vue 绑定 Enter 回车键事件提交表单

  • Z时代
  • 2024-01-10
  • 分类：IT

再传统的网页中，表单里面如果处于焦点，那么直接敲击键盘的 Enter 回车键是可以直接提交表单的，这是一个非常实用的功能，但是到 Vue 项目的时候就不太一样了。

Vue 绑定 Enter 回车键事件提交表单

首先我们不会像传统网页一样提交表，我们都是实用 Ajax 提交表单而不会刷新当前网页，那么这种情况下如何绑定Enter 回车键事件提交表单？

在监听键盘事件时，我们经常需要检查常见的键值。Vue 允许为 v-on 在监听键盘事件时添加按键修饰符：

<!-- 只有在 `keyCode` 是 13 时调用 `vm.submit()` -->
<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难，所以 Vue 为最常用的按键提供了别名：

<!-- 同上 -->
<input v-on:keyup.enter="submit">
<!-- 缩写语法 -->
<input @keyup.enter="submit">

在使用过程中，如果页面只针对一个Input添加键盘enter事件，可以直接按照官方文档定义的别名增加相应事件就可以了。

但是如果是要对页面的 button 添加 enter 键盘事件，就不能写在 input 或者 button 上，因为获取不到焦点，这时候可以直接写在 created 里，如下：

不能直接将事件添加写在 input 上，因为这样必须焦点在 input 上才能触发，所以可以直接绑定在 document 上即可

export default {
  methods: {},
  created() {
    var lett = this;
    document.onkeydown = function(e) {
      var key = window.event.keyCode;
      if (key == 13) {
        // do something
      }
    }
  }
}

当我们对 input 添加 enter 键盘事件后，点击 enter 页面会刷新，可能是因为你把 input 写在了 form 里，form 会自动提交一次，页面就是一个刷新的效果，所以我们可以把 form 标签去掉。

附录：Vue 全部的按键别名：

  • .enter

  • .tab

  • .delete (捕获“删除”和“退格”键)

  • .esc

  • .space

  • .up

  • .down

  • .left

  • .right

以上是 Vue 绑定 Enter 回车键事件提交表单 的全部内容， 来源链接： utcz.com/p/232473.html

回到顶部