使用Vue.js阻止在文本输入中按Enter键时提交表单

JavaScript

小胖凯前端

2020-03-11

我在应用程序中使用Vue.js，并且在表单中输入了文本

<div id="myVueForm">
<form>
   <input type="text"  v-on="keyup:addCategory | key 'enter'">

   <!-- more form fields -->
   <button type="submit">Submit Form</button>
</form>
</div>

在我的Vue实例中，我有以下内容

new Vue({
    el: '#myVueForm',

    methods: {
        addCategory: function(e)
        {
           if(e) e.preventDefault();
           console.log("Added a new category, thanks!");
        }
    }
});

尽管有preventDefault();呼叫，但是当用户在文本输入时按下Enter键时，表单仍会提交（尽管该addCategory()方法确实触发了）。这种行为可以在这个小提琴中得到证明。

我知道我可以使用jQuery捕获事件并阻止提交，但是我想看看在Vue中是否有可能这样做，因为这似乎很常见。

第713篇《使用Vue.js阻止在文本输入中按Enter键时提交表单》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

共8个回答
Harry猴子A 2020.03.11

对于那些只是想阻止表单在Enter上提交但不想在输入上触发任何方法的用户，只需执行以下操作：

<input type="text" @keypress.enter.prevent />

或在自定义组件上包括native修饰符：

<custom-input type="text" @keypress.enter.native.prevent />

精美可读，简洁明了。

ProGO 2020.03.11

我有一个边缘情况，其中输入在弹出窗口内，而弹出窗口仅用于表单的一部分。我想防止Enter在弹出窗口打开时提交表单，但不是完全提交。这工作：

<input type="text" @keydown.enter.prevent = "" />
米亚西门 2020.03.11

您可以从HTML获取事件并将其发送到Vue只是为了防止default，如下所示：

的HTML

<input type="text" v-on:keydown.13="my_method($event)">

JS

methods: {
    my_method(event){
        // do something
        if (event) event.preventDefault();
        if (event) event.stopPropagation();
    },
},
GO逆天L 2020.03.11

我为此写了一个助手。

export const preventFormSubmitOnEnter = {
  mounted() {
    let cb = event => {
      if (event) event.preventDefault();
    };
    if (this.$el.nodeName.toLowerCase() === "form") {
      this.$el.onsubmit = cb;
    } else {
      const forms = this.$el.getElementsByTagName("form");
      for (let i = 0; i < forms.length; i++) {
        const form = forms[i];
        if (form) form.onsubmit = cb;
      }
    }
  }
};

在您的vue组件中包含此mixin，它将自动运行。

这是一个示例（我使用ElementUI）： 

<template>
  <el-form :model="form" :rules="rules" ref="form">
    <el-form-item prop="reference">
      <el-input v-model="form.reference" placeholder="Your Reference"/>
    </el-form-item>
  </el-form>
</template>

<script>
import { preventFormSubmitOnEnter } from "./util";

export default {
  mixins: [preventFormSubmitOnEnter],
  data() {
    return {
      form: {
        reference: ""
      },
      rules: {
        reference: [{ required: true, message: "Reference is required!" }]
      }
    };
  },
  methods: {
    validate() {
      return new Promise((resolve, reject) => {
        this.$refs.form.validate(valid => {
          this.$emit("on-validate", valid, this.form);
          resolve(valid);
        });
      });
    },
    validateField(prop) {
      this.$refs.form.validateField(prop);
    }
  }
};
</script>
西门达蒙 2020.03.11

您可以使用禁用提交事件：

<form @submit.prevent="">

然后，当您需要提交表单时，请使用以下内容：

<button type="submit" @click="mySubmitMethod"> Send </button>
老丝猿路易 2020.03.11

您可以使用此：

的HTML

<form name="..." @submit.prevent="onSubmitMethod">

JS

methods: {
  onSubmitMethod() {

  }
}
番长西里神无 2020.03.11

您可以执行Vue.js 1.0：

<input type="text" @keyup.enter.prevent="addCategory">
ItachiJinJin 2020.03.11

为什么不只是禁用表单提交？

<form v-on:submit.prevent><input .../></form>

相似问题

0 回答

0 回答

5 回答

25 回答

0 回答

0 回答

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android