86

I am using Vue.js in my app and have a text input within a form

<div id="myVueForm"> <form> <input type="text" v-on="keyup:addCategory | key 'enter'"> <!-- more form fields --> <button type="submit">Submit Form</button> </form> </div>

In my Vue instance I have the following

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

Despite the preventDefault() call, when a user presses enter whilst on the text input the form still submits (although the addCategory() method does fire). This behaviour can be demonstrated in this fiddle.

I know I can use jQuery to catch the event and prevent the submit, but I'd like to see if it's possible in Vue to do this as it seems quite a common usage.

Improve this question
2
  • I want to be able to submit the form, just not by pressing enter in this particular text input. And that doesn't change anything. You can remove the button altogether and the form will still submit on enter Commented Jun 26, 2015 at 10:12
  • 2
    Thank you for supplying a fiddle. Not enough people do that these days. Commented Jun 26, 2015 at 10:13

11 Answers 11

Reset to default
102

Here's a solution for Vue.js 2.x:

<input type='text' v-on:keydown.enter.prevent='addCategory' />
Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

There is no need to add the addCategory method, just <input type='text' v-on:keydown.enter.prevent/> is sufficient
This worked for me. Just to add, you must make sure that it is v-on:keydown.enter.prevent to make it work.
76

The submit is always fired on keydown. So use keydown instead of keyup.

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

3 Comments

@keydown.enter.prevent="addCategory"
this helped me <input type="text" v-on:keydown.enter.prevent="addCategory">
@keyup.enter="addCategory" can be also used. But do not forget about @submit.prevent on form element. Tested on Vue v2.6.11.
75

why dont just disable the form submission ?

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

3 Comments

And for modern Vue: @submit.prevent
This won't work if you form only contains 1 element, then the input always gets submitted. See stackoverflow.com/a/12123196/151237
Yes it will. It s not preventing the form to be submitted. It catch the event and prevent the default behavior of the browser form. Submit.prevent is like v-on:submit=(e) => e.preventDefault().
20

You can use for disable the submit event:

<form @submit.prevent="">

and then when you need to do a form submit use something like this:

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

Comments

10

You can use this:

HTML

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

JS

methods: { onSubmitMethod() { } }
Improve this answer

Comments

10

For those simply looking to prevent a form submitting on enter, but not wanting to trigger any method on the input, you can simply do:

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

Or on a custom component include the native modifier:

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

Beautifully readable and succinct.

Improve this answer

Comments

10

Vue.js 1.0 you could do:

<input type="text" @keydown.enter.prevent="addCategory">
Improve this answer

1 Comment

You need to use @keydown, otherwise the form will already have been submitted and you can't prevent it anymore.
3

This works 

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

Comments

2

I had an edge case where an input was within a popup, and the popup was for only part of the form. I wanted to prevent enter from submitting the form while the popup was open, but not altogether. This worked:

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

Comments

1

You can get event from the HTML and send it to Vue just to preventDefault like so:

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

Comments

1

i wrote a helper for this.

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; } } } };

Include this mixin in your vue component and it will automagically work.

here is an example (Im using 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>
Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.