javascript - Prevent form submitting when pressing enter from a text input, using Vue.js -
i using vue.js in app , have text input within 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 vue instance have following
new vue({ el: '#myvueform', methods: { addcategory: function(e) { if(e) e.preventdefault(); console.log("added new category, thanks!"); } } });
despite preventdefault();
call, when user presses enter whilst on text input form still submits (although addcategory()
method fire). behaviour can demonstrated in this fiddle.
i know can use jquery catch event , prevent submit, i'd see if it's possible in vue seems quite common usage.
the submit fired on keydown. use keydown instead of keyup.
<input type="text" v-on="keydown:addcategory | key 'enter'">
Comments
Post a Comment