假设您在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来做这个吗?
当前回答
如果默认使用的第一个按钮在各个浏览器中是一致的，那么在源代码中将它们放在正确的位置，然后使用CSS来切换它们的明显位置。
例如，将它们左右浮动以在视觉上切换它们。
其他回答
我认为这是一个简单的解决方法。将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>
问题
一个表单可以有几个提交按钮。 当在任何输入中按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 -->
这里有一支完整的码笔。
我只是让按钮向右浮动。
这样，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"。
你可以用CSS来做。
首先在标记中放入Next按钮，然后是Prev按钮。
然后使用CSS来定位它们以显示您想要的方式。
可以使用Tabindex来解决这个问题。此外，改变按钮的顺序将是实现这一目标的更有效方法。
更改按钮的顺序，并添加浮动值，将它们分配到您希望在HTML视图中显示的所需位置。
