Form表单文本框Enter回车刷新页面の谜

场景：在Element Plus Form组件的一个文本框中键盘按下Enter自动提交表单刷新页面

产生原因

帅气的Yangger给了我解答后面也在检索Element的内容中找到了答案：

W3C 标准中有如下规定：

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.

即：当一个 form 元素中只有一个输入框时，在该输入框中按下回车应提交该表单。

心机之蛙一直摸我肚子！ 所以这样的情况会出现在任何涉及原生form的场景中 Element团队也只是遵守W3C所设定的规范来进行组件开发

解决方法

在form表单的里面插入一个隐藏的文本框

<el-form :model="formData">
  <el-form-item label="Name:" prop="name">
   <el-input v-model="formData.name" />
   <!-- 这里说的隐藏文本框 并不是指代type=hidden的文本框 而是样式为display: none的文本框 -->
   <input type="text" style="display: none;" />
 </el-form-item>
</el-form>

如果希望阻止这一默认行为，可以在 <el-form> 标签上添加 @submit.prevent/@submit.native.prevent指令 （之前还以为是@key*.enter相关的指令zzz）

<!--
    这里需要注意的是Vue所使用的版本对应的指令
    @submit.prevent -> Vue3
    @submit.native.prevent -> Vue2
-->
<el-form :model="formData" @submit.prevent>
	<el-form-item label="Name:" prop="name">
    <el-input v-model="formData.name" />
  </el-form-item>
</el-form>

归纳总结

该场景与组件/框架无关属于W3C所制定的规范
在W3C制定的Form Submission的规范中将form表单内只有一项input文本框的情况列为了特殊场景
符合该特殊场景时当在input文本框按下Enter回车键则自动提交表单默认提交到form表单中action属性所指定的地址
如果未指定具体的地址则action属性的默认值为/ 这就是我们所说按下回车「刷新当前页面」的原因
如不需要使用这一规范所产生的默认行为根据自己所选框架语法将form表单的submit事件进行prevent阻止冒泡即可