Question

说，我有一个带有文本输入和提交按钮的表单。

如果表单中没有按钮，只需提交事件触发器，但如果至少有一个按钮没有类型属性或type="submit"，则也会点击它。

现在，当我在输入中输入内容然后按Enter键时，我看到触发了按钮点击和表单提交事件。

示例：

＆＃13;

<form>
  <input type="text" />
  <button onclick="alert('submitted');">Submit</button>
</form>

＆＃13;

我认为表单会自动在表单提交事件上单击该按钮。

我想知道这种行为的起源和原因？当我提交表单时，为什么需要单击按钮？

Answer 1

From the spec：

<强> 4.10.22.2 Implicit submission

如果用户代理支持让用户隐式提交表单（例如，在某些平台上点击＆＃34;输入＆＃34;键，而文本字段被重点隐式提交表单），那么这样做是为了默认按钮具有已定义的激活行为的表单必须使用户代理在该默认按钮上运行合成点击激活步骤。

<强> 6.3 [synthetic click] Activation

HTML中的某些元素具有激活行为，这意味着用户可以激活它们。这会触发一系列依赖于激活机制的事件，并且通常会在点击事件中达到高潮，如下所述。

用户代理应允许用户手动触发具有激活行为的元素，例如使用键盘或语音输入或通过鼠标单击。当用户以非点击方式触发具有已定义激活行为的元素时，交互事件的默认操作必须是对元素执行合成点击激活步骤。

See full script here

因此，在您的麦克风中使用语音输入设备Enter处理submit。您的浏览器应该像用户单击按钮以正确处理单击事件附加功能一样，并为那些无法使用鼠标的用户提高可访问性。

Answer 2

它实际上不会自动按下按钮，这不是提交表单的内容。正在提交表单，因为这是文本框的默认特征 - 如果您在文本框中有焦点，则按Enter键将导致尝试提交表单。本文将深入解释：https://www.tjvantoll.com/2013/01/01/enter-should-submit-forms-stop-messing-with-that/

编辑：实际上，更具体地说，只有在以下情况下，表单才会在回车键上提交： 1）表单中存在提交按钮，或 2）表单只包含一个文本输入

如果这些条件都不成立，那么回车键不应提交表格

提交表单时为什么单击按钮？

2 个答案: