Prevent form submitting when pressing enter from a text input, using Vue.js

Question

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.

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 — harryg
– harryg, Commented Jun 26, 2015 at 10:12
Thank you for supplying a fiddle. Not enough people do that these days. — Drakes
– Drakes, Commented Jun 26, 2015 at 10:13

bradlis7 · Accepted Answer · 2017-02-22 16:33:57Z

102

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

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

edited Feb 22, 2017 at 16:33

answered Feb 15, 2017 at 4:30

bradlis7

3,5094 gold badges30 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Suau Over a year ago

There is no need to add the addCategory method, just <input type='text' v-on:keydown.enter.prevent/> is sufficient

Kevz Over a year ago

This worked for me. Just to add, you must make sure that it is v-on:keydown.enter.prevent to make it work.

Sebastian Nette · Accepted Answer · 2015-06-26 10:13:00Z

76

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

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

answered Jun 26, 2015 at 10:13

Sebastian Nette

7,9022 gold badges20 silver badges18 bronze badges

3 Comments

wesamly Over a year ago

@keydown.enter.prevent="addCategory"

Andrej Gaspar Over a year ago

this helped me <input type="text" v-on:keydown.enter.prevent="addCategory">

Filip Kováč Over a year ago

@keyup.enter="addCategory" can be also used. But do not forget about @submit.prevent on form element. Tested on Vue v2.6.11.

Clem · Accepted Answer · 2016-10-24 07:55:21Z

75

why dont just disable the form submission ?

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

answered Oct 24, 2016 at 7:55

Clem

2,33218 silver badges20 bronze badges

3 Comments

Michael Giovanni Pumo Over a year ago

And for modern Vue: @submit.prevent

Coreus Over a year ago

This won't work if you form only contains 1 element, then the input always gets submitted. See stackoverflow.com/a/12123196/151237

Clem Over a year ago

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().

cjeronimomx · Accepted Answer · 2019-07-16 19:35:57Z

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>

answered Jul 16, 2019 at 19:35

cjeronimomx

89510 silver badges9 bronze badges

Comments

ErezSo · Accepted Answer · 2018-11-17 12:47:29Z

10

You can use this:

HTML

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

JS

methods: {
  onSubmitMethod() {

  }
}

edited Nov 17, 2018 at 12:47

ErezSo

151 silver badge3 bronze badges

answered Aug 17, 2018 at 2:54

Rafael Andrs Cspedes Basterio

4,4311 gold badge19 silver badges12 bronze badges

Comments

fredrivett · Accepted Answer · 2020-02-14 15:12:29Z

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.

answered Feb 14, 2020 at 15:12

fredrivett

6,7223 gold badges48 silver badges57 bronze badges

Comments

Ryun · Accepted Answer · 2024-11-30 22:45:52Z

10

Vue.js 1.0 you could do:

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

edited Nov 30, 2024 at 22:45

answered Nov 24, 2015 at 2:07

Ryun

7297 silver badges11 bronze badges

1 Comment

Lukas Knuth Over a year ago

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

medo-mi · Accepted Answer · 2020-05-15 09:29:15Z

3

This works

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

answered May 15, 2020 at 9:29

medo-mi

513 bronze badges

Comments

crash springfield · Accepted Answer · 2020-01-24 17:33:00Z

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 = "" />

answered Jan 24, 2020 at 17:33

crash springfield

1,0927 gold badges17 silver badges34 bronze badges

Comments

Yevgeniy Afanasyev · Accepted Answer · 2018-05-25 07:10:06Z

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

answered May 25, 2018 at 7:10

Yevgeniy Afanasyev

42k30 gold badges186 silver badges211 bronze badges

Comments

Stefan Quy · Accepted Answer · 2019-01-29 00:10:46Z

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>

Collectives™ on Stack Overflow

Prevent form submitting when pressing enter from a text input, using Vue.js

11 Answers 11

2 Comments

3 Comments

3 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

11 Answers 11

2 Comments

3 Comments

3 Comments

Comments

Comments

Comments

1 Comment

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related