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

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

用你给的例子:

<form>
    <input type="text" name="field1" /><!-- Put your cursor in this field and press Enter -->
    <input type="submit" name="prev" value="Previous Page" /> <!-- This is the button that will submit -->
    <input type="submit" name="next" value="Next Page" /> <!-- But this is the button that I WANT to submit -->
</form>

如果您点击“上一页”，只会提交“prev”的值。如果你点击“下一页”，只有“下一页”的值会被提交。

但是，如果您在表单的某个地方按下Enter键，则“上一页”和“下一页”都不会提交。

所以使用伪代码你可以做到以下几点:

If "prev" submitted then
    Previous Page was click
Else If "next" submitted then
    Next Page was click
Else
    No button was click

在大多数浏览器中，无需JavaScript或CSS即可工作:

<form>
    <p><input type="text" name="field1" /></p>
    <p><a href="previous.html">
    <button type="button">Previous Page</button></a>
    <button type="submit">Next Page</button></p>
</form>

Firefox, Opera, Safari和谷歌Chrome浏览器都可以使用。一如既往，ie浏览器是问题所在。

当JavaScript被打开时，这个版本可以工作:

<form>
    <p><input type="text" name="field1" /></p>
    <p><a href="previous.html">
    <button type="button" onclick="window.location='previous.html'">Previous Page</button></a>
    <button type="submit">Next Page</button></p>
</form>

所以这个解决方案的缺陷是:

如果您使用关闭JavaScript的Internet Explorer，“上一页”将无法工作。

请注意，后退按钮仍然有效!

问题

一个表单可以有几个提交按钮。 当在任何输入中按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 -->

这里有一支完整的码笔。

给你的提交按钮设置相同的名称，就像这样:

<input type="submit" name="submitButton" value="Previous Page" />
<input type="submit" name="submitButton" value="Next Page" />

当用户按下Enter并将请求发送到服务器时，您可以在服务器端代码中检查submitButton的值，该代码包含一组表单名称/值对。例如，在ASP Classic中:

If Request.Form("submitButton") = "Previous Page" Then
    ' Code for the previous page
ElseIf Request.Form("submitButton") = "Next Page" Then
    ' Code for the next page
End If

参考:在一个表单上使用多个提交按钮

从https://html.spec.whatwg.org/multipage/forms.html implicit-submission

表单元素的默认按钮是树中的第一个提交按钮 它的表单所有者是该表单元素。 如果用户代理支持让用户隐式提交表单 (例如，在某些平台上，在输入文本时按下“enter”键 字段被隐式聚焦提交表单)…

将下一个输入设置为type="submit"，并将前一个输入更改为type="button"，应该会得到所需的默认行为。

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

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