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

Question

我在我的应用程序中使用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()方法，当用户在文本输入框中按下回车键时，表单仍然会提交（虽然addCategory()方法确实会被触发）。您可以在此 fiddle中演示此行为。

我知道我可以使用 jQuery 捕获事件并阻止提交，但我想看看是否可能在 Vue 中做到这一点，因为它似乎是一个常见的用法。

- harryg

---

我想要能够提交表单，但不是通过在特定文本输入框中按回车键。而且这并不会改变任何东西。您可以完全删除按钮，表单仍将在按下回车键时提交。 - harryg

感谢您提供一个 Fiddle。现在很少有人这样做了。 - Drakes

Answer 1

这是Vue.js 2.x的解决方案：

<input type='text' v-on:keydown.enter.prevent='addCategory' />

- bradlis7

---

您的编辑被拒绝了，但它更符合问题。我不知道如何“接受”它，但我已经做出了更改。感谢@Leng。 - bradlis7

不需要添加“addCategory”方法，只需使用“<input type ='text' v-on：keydown.enter.prevent/>”即可。 - Suau

这对我有用。只是要补充的是，你必须确保它是v-on:keydown.enter.prevent才能使其工作。 - Kevz

Answer 2

提交事件总是在按键按下时触发。因此，请使用 keydown 而不是 keyup。

<input type="text"  v-on="keydown:addCategory | key 'enter'">

- Sebastian Nette

---

@keydown.enter.prevent="addCategory" - wesamly

这对我很有帮助 <input type="text" v-on:keydown.enter.prevent="addCategory"> - Andrej Gaspar

@keyup.enter="addCategory" 可以使用。但不要忘记在表单元素上使用 @submit.prevent。在 Vue v2.6.11 上进行了测试。 - Filip Kováč

Answer 3

为什么不直接禁用表单提交？

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

- Clem

---

针对现代版的Vue：@submit.prevent - Michael Giovanni Pumo

如果你的表单只包含一个元素，这种方法将无法起作用，因为输入总是会被提交。请参考https://dev59.com/m3I_5IYBdhLWcg3wBuNs#12123196。 - Coreus

是的，它会这样做。它不会阻止表单被提交。它捕获事件并防止浏览器表单的默认行为。Submit.prevent 就像 v-on:submit=(e) => e.preventDefault()。 - Clem

Answer 4

你可以使用以下代码来禁用提交事件：

<form @submit.prevent="">

然后，当您需要进行表单提交时，请使用以下类似代码：

<button type="submit" @click="mySubmitMethod"> Send </button>

- cjeronimomx

Answer 5

你可以使用这个：

HTML

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

JavaScript

methods: {
  onSubmitMethod() {

  }
}

- Rafael Andrs Cspedes Basterio

Answer 6

Vue.js 1.0 你可以做到：

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

- Ryun

---

你需要使用 @keydown，否则表单已经被提交，你将无法再阻止它。 - Lukas Knuth

Answer 7

对于那些仅想在按下回车键时防止表单提交，但不希望触发输入框中的任何方法的人，你可以简单地执行以下操作：

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

或者在自定义组件中使用 native 修饰符：

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

易读且简洁。

- fredrivett

Answer 8

这个有效。

 <input type="text" class="form-control" v-model="get_user" @keydown.enter.prevent = "">

- medo-mi

Answer 9

我遇到了一个边缘情况，其中输入位于弹出窗口中，而弹出窗口仅用于表单的一部分。我想在弹出窗口打开时防止按Enter提交表单，但并不是完全禁用。下面的代码可以解决这个问题：

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

- crash springfield

Answer 10

您可以从HTML中获取事件并将其发送到Vue，仅需像这样防止默认操作：

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();
    },
},

- Yevgeniy Afanasyev