问题

一个表单可以有几个提交按钮。 当在任何输入中按return时，浏览器将使用第一个提交按钮。 然而，有时我们想使用不同的/稍后按钮作为默认值。

选项

首先添加一个具有相同操作的隐藏提交按钮(☹️副本) 首先在表单中放入所需的提交按钮，然后通过CSS将其移动到正确的位置(☹️可能不可行，可能导致繁琐的样式) 通过JavaScript改变所有表单输入中的返回键的处理(☹️需要JavaScript)

没有一个选项是理想的，所以我们选3。因为大多数浏览器都启用了JavaScript。

选择解决方案

// example implementation document.addEventListener('DOMContentLoaded', (ev) => { for (const defaultSubmitInput of document.querySelectorAll('[data-default-submit]')) { for (const formInput of defaultSubmitInput.form.querySelectorAll('input')) { if (formInput.dataset.ignoreDefaultSubmit != undefined) { continue; } formInput.addEventListener('keypress', (ev) => { if (ev.keyCode == 13) { ev.preventDefault(); defaultSubmitInput.click(); } }) } } }); <!-- example markup --> <form action="https://postman-echo.com/get" method="get"> <input type="text" name="field1"> <input type="submit" name="submit" value="other action"> <input type="submit" name="submit" value="default action" data-default-submit> <!-- this button will be used on return --> </form>

能够从某些输入中删除增强可能是有用的。这可以通过以下方法实现:

<input type="text" name="field2" data-ignore-default-submit> <!-- uses browser standard behaviour -->

这里有一支完整的码笔。

我认为这是一个简单的解决方法。将Previous按钮类型更改为button，并添加一个新的onclick属性，值为jQuery(this).attr('type'，'submit');

因此，当用户单击Previous按钮时，它的类型将被更改为submit，表单将与Previous按钮一起提交。

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

  <!-- This is the button that will submit -->
  <input type="button" onclick="jQuery(this).attr('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>

要做到这一点，只需改变制表符顺序即可。保持简单。

另一个简单的选项是将返回按钮放在HTML代码中的提交按钮之后，但将其浮动到左侧，以便它在页面上出现在提交按钮之前。

我只是让按钮向右浮动。

这样，Prev按钮在Next按钮的左边，但在HTML结构中Next在前面:

.f { 浮:正确; ｝ .clr { 明确:; ｝ <form action="action" method="get"> <input type="text" name="abc"> < div id = "按钮" > <input type="submit" class="f" name="next" value=" next" > <input type="submit" class="f" name="prev" value=" prev" > < div class = " clr " > < / div > < !这个div可以防止后面的元素随按钮一起浮动。保持他们“内部”div#按钮—> < / div > > < /形式

优于其他建议的优点:没有JavaScript代码，可访问，两个按钮都保持type="submit"。

使用JavaScript(这里是jQuery)，您可以在提交表单之前禁用prev按钮。

$('form').on('keypress', function(event) {
    if (event.which == 13) {
        $('input[name="prev"]').prop('type', 'button');
    }
});

如果默认使用的第一个按钮在各个浏览器中是一致的，那么在源代码中将它们放在正确的位置，然后使用CSS来切换它们的明显位置。

例如，将它们左右浮动以在视觉上切换它们。