表单中只有一个输入框,按下enter键页面会刷新并且URL会多一个问号
按回车如下:
原因:
如果<form></form>表单中只有一个<input type="text"/>
则使文本框获取焦点,并单击回车,form会自动提交。
解决方案:
//方案一 :οnsubmit="return false;" 回车失效
<el-form
:model="TokenValid"
:rules="rulesForm"
ref="TokenValid"
v-if="tokenDialog"
onsubmit="return false"
>
<el-form-item prop="token">
<el-input
@input="oninput()"
v-model="TokenValid.token"
prefix-icon="el-icon-lock"
:placeholder="$t('login.APPtoken')"
class="inputStyle"
></el-input>
</el-form-item>
</el-form>
//方案二 : @submit.native.prevent 阻止默认事件
<el-form
:model="TokenValid"
:rules="rulesForm"
ref="TokenValid"
v-if="tokenDialog"
@submit.native.prevent
>
<el-form-item prop="token">
<el-input
@input="oninput()"
v-model="TokenValid.token"
prefix-icon="el-icon-lock"
:placeholder="$t('login.APPtoken')"
@keyup.enter.native="checkTokenValid('TokenValid')"
class="inputStyle"
></el-input>
</el-form-item>
</el-form>
//方案三:增加一个无name属性的隐藏文本框 打破只有一个input框的条件
<el-form
:model="TokenValid"
:rules="rulesForm"
ref="TokenValid"
v-if="tokenDialog"
>
<el-form-item prop="token">
<el-input
@input="oninput()"
v-model="TokenValid.token"
prefix-icon="el-icon-lock"
:placeholder="$t('login.APPtoken')"
@keyup.enter.native="checkTokenValid('TokenValid')"
class="inputStyle"
></el-input>
//添加input并隐藏
<el-input type="text" style="display:none;"></el-input>
</el-form-item>
</el-form>
//方案四:监听keydown事件,添加自己的逻辑
以上方法均来源于网络