假设您在HTML表单中创建了一个向导。一个按钮后退，一个按钮前进。因为当您按Enter键时，返回按钮首先出现在标记中，它将使用该按钮提交表单。
例子:
< >形式 <！—将光标移至该字段，按“Enter”。—> <input type="text" name="field1" /> <！这是提交的按钮——> <input type="submit" name="prev" value="Previous Page" /> <！——但这是我想提交的按钮——> <input type="submit" name="next" value=" next Page" /> > < /形式
我想要确定当用户按Enter键时使用哪个按钮提交表单。这样，当您按下Enter键时，向导将移动到下一页，而不是上一页。你必须使用tabindex来做这个吗?
当前回答
在大多数浏览器中，无需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，“上一页”将无法工作。
请注意，后退按钮仍然有效!
其他回答
给你的提交按钮设置相同的名称，就像这样:
<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
参考:在一个表单上使用多个提交按钮
使用JavaScript(这里是jQuery)，您可以在提交表单之前禁用prev按钮。
$('form').on('keypress', function(event) {
if (event.which == 13) {
$('input[name="prev"]').prop('type', 'button');
}
});
你可以用CSS来做。
首先在标记中放入Next按钮，然后是Prev按钮。
然后使用CSS来定位它们以显示您想要的方式。
问题
一个表单可以有几个提交按钮。 当在任何输入中按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="button" name="prev" value="Previous Page" />
现在Next按钮将是默认的，另外你也可以添加默认属性，这样你的浏览器就会高亮显示它:
<input type="submit" name="next" value="Next Page" default />
