Prevent submitting form by pressing the Enter key Vuejs
You have several ways. One is to use @keydown.enter.prevent
in <form>
. This prevents the submit but also prevents the enter
from being used where it was pressed, and perhaps this effect is undesired.
Another way is to use @keydown.enter.stop
locally in the input in question, or by creating a div
around these inputs and put there to prevent the event from propagating to form
.
<form action="/foo"> <div @keydown.enter.stop> <input type="text" v-model="input1" /> <input type="text" v-model="input2" /> <textarea v-model="textarea"></textarea> </div> </form>
And you can add @keydown.enter.stop.prevent to the input field.
<form action="/foo"> <input type="text" v-model="input" @keydown.enter.stop.prevent/> <textarea v-model="textarea"></textarea> </form>
Was this post helpful?
Let us know if you liked the post. That’s the only way we can improve.
Yes9
No1