form表单只有一个input时，回车自动提交表单造成页面刷新效果

现象&＃xff1a;el-form 中仅有一个input&＃xff0c;input上设置了回车响应事件&＃xff0c;首次按回车键后&＃xff0c;页面刷新&＃xff0c;再次按回车才执行了响应事件

<el-form ref&＃61;"form" &＃64;submit.native.prevent>
<el-form-item>
<el-input &＃64;keyup.enter.native&＃61;"onSMSCodeSubmit(&＃39;form&＃39;)" >
el-input>
el-form-item>
el-form>


先了解一下 form 标签

form表单中只有一个input时&＃xff0c;按回车键&＃xff0c;会自动提交表单&＃xff08;见1&＃xff09;&＃xff0c;并且url 多一个问号&＃xff08;见2&＃xff09;

https://www.rfc-editor.org/rfc/rfc1866.txt
&＃xff08;1&＃xff09; 查看目录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.

&＃xff08;2&＃xff09;查看目录8.2.2

如果 form 表单没有指定 action 属性&＃xff0c;按回车键&＃xff0c;会向当前url提交&＃xff0c;实际起到了页面刷新的效果&＃xff0c;但是这时提交并没有传表单参数&＃xff0c;也就是仅仅只有现url。

所以要解决的问题不是页面刷新&＃xff0c;而是取消form 内只有一个input时按回车键的默认提交行为

解决方法

一、干预form表单行为

• 对于原生form标签&＃xff0c;阻止form表单的提交&＃xff1a;
  在form标签中添加事件

• 对于vue中
  取消form表单默认提交行为&＃xff0c;可以在 标签上添加 &＃64;submit.native.prevent

二、破坏“只有一个input”的条件

增加一个input dom 节点&＃xff0c;设置为不显示

<form action&＃61;"http://www.baidu.com">
<input type&＃61;"text">
<input type&＃61;"text" style&＃61;"display:none;">
form>