form表单默认提交问题

form表单默认提交问题

摘要

推荐默认屏蔽 <form></form> 的submit事件，如果没有无障碍设计的要求。

问题背景

做筛选区域时，单筛选项的表单，回车会导致页面刷新。

问题描述

<form> 节点自带隐式提交效果。

<form action="">
  <input type="text">
</form>

当聚焦<input>时，点击回车键，页面会强制刷新。

问题原因

浏览器要求实现隐式提交：在表单中，仅有一个文本域，且文本域聚焦时，点击回车自动触发提交事件^[1]。

解决方案

1 屏蔽 <form> 的 submit 事件

2 封装多 <input> 框组件替换单 <input> 框

3 无需校验时，不使用 <form>

延伸阅读

element#19488

无障碍设计

---

1. https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#implicit-submission ↩︎