首页 文章

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

提问于
浏览
9

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

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

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

Example:

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

我想表单会自动在表单提交事件上单击该按钮 .

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

2 回答

  • 9

    From the spec

    4.10.22.2 Implicit submission

    如果用户代理支持让用户隐式提交表单(例如,在某些平台上按下“enter”键而文本字段被聚焦时隐式提交表单),则对默认按钮具有已定义的表单执行此操作激活行为必须使用户代理在该默认按钮上运行合成点击激活步骤 .

    6.3 [synthetic click] Activation

    HTML中的某些元素具有激活行为,这意味着用户可以激活它们 . 这触发了一系列依赖于激活机制的事件,并且通常在点击事件中达到顶点,如下所述 . 用户代理应允许用户手动触发具有激活行为的元素,例如使用键盘或语音输入或通过鼠标单击 . 当用户以非点击方式触发具有已定义激活行为的元素时,交互事件的默认操作必须是对元素执行合成点击激活步骤 .

    See full script here


    因此按下 Enter 将被处理为麦克风中的 submit (带语音输入设备) . 您的浏览器应该像用户单击按钮以正确处理单击事件附加功能一样,并为不能使用鼠标的用户提高可访问性 .

  • -3

    它实际上并不是文本框的默认特征 - 如果您在文本框中有焦点,按回车键将导致尝试提交表单 . 本文进一步解释:https://www.tjvantoll.com/2013/01/01/enter-should-submit-forms-stop-messing-with-that/

    编辑:实际上,更具体地说,表单只会在输入键上提交,如果:1)表单中存在提交按钮,或2)表单只包含一个文本输入

    如果这些条件都不成立,则输入键不应提交表单

相关问题