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

发布于 2020-03-25 10:51:24 字数 1614 浏览 3712 评论 0

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

首先我们不会像传统网页一样提交表,我们都是实用 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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

列表为空,暂无数据

关于作者

JSmiles

生命进入颠沛而奔忙的本质状态,并将以不断告别和相遇的陈旧方式继续下去。

0 文章
0 评论
84935 人气
更多

推荐作者

待"谢繁草

文章 0 评论 0

战皆罪

文章 0 评论 0

子英

文章 0 评论 0

爱的十字路口

文章 0 评论 0

孤者何惧

文章 0 评论 0

xi霄xi

文章 0 评论 0

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。