时间戳

首页 > 解决方案 > 当用户点击输入时，如何在具有多个按钮的表单中触发正确的表单操作？

javascript - 当用户点击输入时，如何在具有多个按钮的表单中触发正确的表单操作？

问题描述

我有一个我用 javascript 提交的表单（具体反应，但我认为这对于问题的目的并不重要）。

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

至关重要的是，辅助按钮在 HTML 顺序中排在第一位，我无法更改它（即使使用 flexbox 顺序也不行）。

令人沮丧的是，这似乎意味着当用户完成输入并按下回车键时，会触发辅助按钮。

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

我怎样才能让它在按下回车时触发表单的主要操作？

仅当用户单击该按钮或明确关注该按钮并按 Enter 键时，才会发生次要操作。

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

<form onSubmit={primaryAction}>

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

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

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

我也试过：

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

标签： javascripthtmlreactjsformsaccessibility

解决方案

这应该可以解决问题，或者至少给您一些解决方法的想法。如果不查看其余代码，就很难编写解决方案。

第一个按钮的类型是button，第二个是submit。

<form onSubmit={primaryAction}>
  <input type="text" />
  <button type="button" onClick={secondaryAction}>
    Second action
  </button>
  <button type="submit">Submit</button>
</form>

推荐阅读