Vue 绑定 Enter 回车键事件提交表单 - 文章教程

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

发布于 2020-03-25 字数 2042 浏览 2874 评论 0

再传统的网页中,表单里面如果处于焦点,那么直接敲击键盘的 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

如果你对这篇文章有疑问,欢迎到本站 社区 发帖提问或使用手Q扫描下方二维码加群参与讨论,获取更多帮助。

扫码加入群聊

发布评论

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

目前还没有任何评论,快来抢沙发吧!

关于作者

JSmiles

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

2583 文章
29 评论
84935 人气
更多

推荐作者

清欢

文章 1 评论 0

贱贱哒

文章 3 评论 0

悸初

文章 2 评论 0

西瓜杏

文章 0 评论 0

各自安好

文章 0 评论 0