有两个提交按钮时使用 Enter 键提交错误的表单答案

【问题标题】：Wrong form submission using Enter Key when there are two submit buttons有两个提交按钮时使用 Enter 键提交错误的表单
【发布时间】：2011-03-13 03:58:02
【问题描述】：

我有一个带有两个提交按钮的表单——一个用于取消，另一个用于将表单值保存到数据库。当按下 Enter 键时，Cancel 按钮提交表单，而不是 Save 按钮提交表单。当按下 Enter 键时，如何让 Save 按钮提交表单？

谢谢，

【问题讨论】：

您可以使用重置按钮来取消
当按下取消按钮时，用户应该被导航到不同的页面。我可以使用重置按钮来做到这一点吗？谢谢

标签： html

【解决方案1】：

您的表单不应有两个提交按钮。将保存按钮设为提交类型，将取消按钮设为按钮类型。

编辑：我将更新此答案以处理提出的几个问题。

我在 HTML 规范（即DTD）中看到的任何内容都不允许在一个表单中使用两个提交按钮，但可能会出现 OP 提到的确切问题。在他或她的情况下，解决方案是制作按钮类型的取消按钮并添加以下 JavaScript：

<input type="button" value="Cancel" onclick="window.location.href='nextpage.html';"/>

在这里，可以将nextpage.html 替换为适当的URL。或者，如果重定向到表单的操作，this.form.action 可以是新位置。

如果 OP 想要安全并避免使用 JavaScript，那么这只能是一个（可能是样式化的）超链接。

【讨论】：

在一个表单中有多个提交按钮是完全可以的。在这种情况下，真正的问题是浏览器的不稳定行为。此外，如果取消按钮不是<input> 按钮，则不会提交表单。
是的，根据 DTD 是允许的，但正如您所说，浏览器没有能力很好地处理这种情况。解决方案是保留一个提交按钮并在另一个上使用 JavaScript（如果绝对必要）。也许OP可以澄清取消按钮的目的。
HTML 规范没有定义当键盘焦点不在其中一个时，多个提交按钮的默认激活顺序；它仅在焦点位于提交元素本身时指定激活行为。不要责怪浏览器没有实现未指定的东西。 :-)
确实如此。无论如何，我想不出一种合乎逻辑的方式来定义这种行为！