现象:el-form 中仅有一个input,input上设置了回车响应事件,首次按回车键后,页面刷新,再次按回车才执行了响应事件
<el-form ref="form" @submit.native.prevent><el-form-item><el-input @keyup.enter.native="onSMSCodeSubmit('form')" ></el-input></el-form-item></el-form>
先了解一下 form 标签
form表单中只有一个input时,按回车键,会自动提交表单(见1),并且url 多一个问号(见2)
https://www.rfc-/rfc/rfc1866.txt
(1) 查看目录8.2
When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.
(2)查看目录8.2.2
如果 form 表单没有指定 action 属性,按回车键,会向当前url提交,实际起到了页面刷新的效果,但是这时提交并没有传表单参数,也就是仅仅只有现url。
所以要解决的问题不是页面刷新,而是取消form 内只有一个input时按回车键的默认提交行为
解决方法
一、干预form表单行为
对于原生form标签,阻止form表单的提交:在form标签中添加事件
<form οnsubmit="return false;”>
对于vue中
取消form表单默认提交行为,可以在 标签上添加@submit.native.prevent
vue 事件修饰符
二、破坏“只有一个input”的条件
增加一个input dom 节点,设置为不显示
<form action=""><input type="text"><input type="text" style="display:none;"></form>