Question

这会阻止输入提交，但此时阻止输入输入。我需要输入中的enterkey工作，但不提交表单。

<template id="form-template">
       <form action="save-passport" @keypress.enter.prevent method="post" enctype="application/x-www-form-urlencoded"   >
<input type="submit" v-show="loaded"  v-on:click="saveForm" value="Save" />

<input type="text" required="required" name="field-11" > 
<select required="required" name="field-13"><option value=""></option> 
</select>
</form>
       </template>

Answer 1

您需要使用prevent修饰符。另一件事，你的网页本身必须有焦点。这意味着，如果您只是访问该网页，prevent将无效。但是，如果您单击表单中的某个位置，prevent将适合您。

您仍然可以使用document.forms[0].submit();

之类的内容通过JavaScript提交表单

Answer 2

我是这样做的首先，我从表单标签中删除了vue修饰符。第二个我从提交到按钮的输入类型第三个是我的saveForm函数

saveForm:function(){
        if (someCondition){
            event.preventDefault();
        }else{
            document.forms[0].submit();
        }
      }

Answer 3

有同样的问题。我所做的解决方案是将Submit方法放在开始表单标签上。然后不需要，在底部的表单内输入/按钮type =“ submit”。

<form class="form" action="" method="POST" @submit.enter.prevent="createForm()">

输入上还有其他可用选项：

@keydown.enter.prevent
@keyup.enter.prevent
@submit.enter.prevent

Vuejs如何在输入时阻止表单提交但仍然保存输入中的工作？

3 个答案: