Javascript 在一个具有多个按钮的表单中，当用户点击enter时，如何触发正确的表单操作？

我有一个用javascript提交的表单（用react，但我认为这与问题无关）

表单有几个输入和两个按钮。一个是正常的提交按钮，另一个触发辅助操作

重要的是，次按钮在HTML顺序中排在第一位，我无法更改这一点（即使是flexbox顺序）

令人沮丧的是，这似乎意味着当用户完成键入并点击enter时，就会触发次按钮

我正在收听主要操作的表单提交事件，这是我认为点击enter会触发的。辅助按钮上有一个单击事件侦听器

如何使窗体的主要操作在按enter键时触发？

只有当用户单击该按钮或明确关注该按钮并点击enter键时，才会发生第二个操作

您可以将表单视为如下结构：

<form onSubmit={primaryAction}>

   <input ... />
   <input ... />

   <button onClick={secondaryAction}>Second action</>

   <button>Submit</button>
</form>

第二个动作
提交

我也试过：

• 重新组织HTML，使主按钮在HTML顺序中位于第一位。假设这是可行的，但这不是一个选项，因为我在这个表单上使用绝对定位，并且使用HTML命令（即使使用flexbox命令）进行Fuzing会破坏布局
• 在表单的提交事件上使用。这似乎还不能跨浏览器工作

---

我正在努力实现的一个很好的例子是。在我看到的版本中有一个表单，有一个文本输入和两个操作（使用我的当前位置和搜索）。当你按enter键时，会触发主要（搜索）操作，尽管次按钮在html顺序中排在第一位。

这应该可以解决问题，或者至少给你一些解决问题的方法。在没有看到其余代码的情况下编写解决方案是很困难的

第一个按钮是

按钮

，第二个按钮是

提交

第二个动作
提交

如果您无法更改HTML顺序（但可以修改HTML），则跨浏览器执行此操作需要一些技巧

下面的解决方案也可以在不使用JavaScript的情况下工作

我们要做的是添加一个按钮，它既隐藏又无法通过键盘访问。此按钮在DOM顺序中排在第一位，因此将是浏览器中的默认操作（大多数浏览器…IE可能会播放，但尚未在Opera中测试）

要生成此按钮，我们使用

隐藏按钮

类使按钮不可见。我们还添加了

tabindex=“-1”

，这样就不能通过键盘访问它

此按钮的操作与您的主要操作相同

在下面的示例中，我添加了控制台日志，以便您可以确认它是否正常工作

函数hiddenBtn（）{
控制台日志（“隐藏按钮”）；
返回false；
}
函数错误BTN（）{
控制台日志（“错误”按钮）；
返回false；
}
函数submitBtn（）{
控制台日志（“提交按钮”）；
返回false；
}

。隐藏按钮{
位置：绝对！重要；
高度：1px；
宽度：1px；
溢出：隐藏；
剪辑：rect（1px 1px 1px）；/*IE6，IE7*/
剪辑：rect（1px，1px，1px，1px）；
空白：nowrap；/*添加了行*/
}

提交
第二个动作
提交

能否将主按钮改为按钮而不是按钮？