【web development】输入框单击回车隐式提交表单的禁用与讨论 enter keypress inside input causing form submit

中文与日文输入误触发隐式提交带来的用户体验/业务问题

场景再现

在测试我写的输入表单的时候，突然发现了一个问题，在一个输入框为 focus 状态的时候，如果用户误触了回车，会触发表单的提交事件，导致整个表单输入在用户不知情的情况下意外结束。这个情况在中、日文输入的情况下非常可能发生。主要有以下的原因：

• 中、日文的输入法有可能以回车键选择、结束输入
• 一些用户的行为习惯会多次按下回车键
  因此，规避这种意外提交事件是必要的。如果输入意外结束，可能会产生错误的数据和有误的结果。

解决方案

要避免这种意外提交，实际上是很方便的。在表单元素或者表单元素的祖先元素上注册一个onkeypress监听事件：

<section onkeypress={preventSubmit}>
	<lightning-record-edit-form