JavaScript中回车提交表单时键盘事件与submit事件触发顺序对比

事件触发优先级结论 #

在可通过回车提交的表单内按下回车键时，事件触发顺序为：keydown → keypress → 表单submit事件 → keyup，键盘事件的触发顺序始终早于表单提交事件。

测试代码中submit事件不触发的原因 #

测试代码里回车无法触发表单提交，是因为不符合浏览器内置的表单回车提交规则：

• 表单内没有添加type="submit"属性的提交按钮/提交输入元素
• 当表单存在多个普通文本输入框时，浏览器默认不会响应回车提交操作，仅当表单内只有1个文本输入框且无提交按钮时，才会默认支持回车提交。

验证方法 #

在现有form标签内添加一行隐藏的提交元素，即可复现完整的事件触发顺序：

<input type="submit" style="display: none;">

添加后再在输入框内按下回车键，控制台就会依次输出inside keyboard handler和inside form submit handler，和前面的触发顺序结论一致。

内容的提问来源于stack exchange，提问作者Blue