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

我在我的应用程序中使用 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()方法确实触发了)。这种行为可以在 这把小提琴中演示。

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

91847 次浏览
小开
最佳答案

提交总是在 keydown 上触发，所以使用 keydown 代替 keyup。

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

Vue.js 1.0你可以做到:

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

为什么不禁用表单提交？

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

下面是 Vue.js 2. x 的一个解决方案:

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

您可以从 HTML 中获取事件并将其发送到 Vue，以防止默认情况如下:

超文本标示语言

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

你可以用这个:

超文本标示语言

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

JS

methods: {
onSubmitMethod() {


}
}
小开

我为此写了个助手。

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>
小开

可以用来禁用提交事件:

<form @submit.prevent="">

然后当你需要提交表单时，可以这样做:

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

我有一个边缘情况，输入在一个弹出窗口中，而弹出窗口只是表单的一部分。我想阻止输入提交的形式，而弹出窗口是打开的，但不是完全。这个方法奏效了:

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

对于那些只是想阻止表单在输入时提交，但又不想触发任何输入方法的人，你可以简单地这样做:

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

或者在自定义组件上包含 native修饰符:

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

可读性强，简洁明了。

小开

这个管用

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

提交答案