HTML 表单中的多个提交按钮

Question

假设您以 HTML 表单创建一个向导。一键返回，一键前进。由于当您按 Enter 时，后退按钮首先出现在标记中，因此它将使用该按钮提交表单。

示例：

<form>
  <!-- Put your cursor in this field and press Enter -->
  <input type="text" name="field1" />

  <!-- This is the button that will submit -->
  <input type="submit" name="prev" value="Previous Page" />

  <!-- But this is the button that I WANT to submit -->
  <input type="submit" name="next" value="Next Page" />
</form>

我想决定当用户按 Enter 时使用哪个按钮来提交表单。这样，当您按 Enter 时，向导将移至下一页，而不是上一页。您必须使用

tabindex

才能执行此操作吗？

Answer 1

你可以用JS实现它，将其添加到你的页面。

<script>
      const form = document.getElementById("wizard-form");
      const nextButton = form.querySelector('input[name="next"]');
    
      form.addEventListener("keydown", (event) => {
        if (event.key === "Enter") {
          event.preventDefault();
          nextButton.click();
        }
      });

</script>