假设您在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来做这个吗?
当前回答
如果你在一个页面上有多个活动按钮，你可以这样做:
将您想要在Enter键上触发的第一个按钮标记为表单上的默认按钮。对于第二个按钮，将其关联到键盘上的退格键。Backspace eventcode是8。
$(document).on("keydown", function(event) { if (event.which.toString() == "8") { var findActiveElementsClosestForm = $(document.activeElement).closest("form"); if (findActiveElementsClosestForm && findActiveElementsClosestForm.length) { $("form#" + findActiveElementsClosestForm[0].id + " .secondary_button").trigger("click"); } } }); <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script> <form action="action" method="get" defaultbutton="TriggerOnEnter"> <input type="submit" id="PreviousButton" name="prev" value="Prev" class="secondary_button" /> <input type="submit" id='TriggerOnEnter' name="next" value="Next" class="primary_button" /> </form>
其他回答
我只是让按钮向右浮动。
这样，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提交表单。该函数将由表单元素的OnKeyPress事件触发，并检测是否选择了Enter键。如果是这种情况，它将提交表单。
这里有两页给出了如何做到这一点的技巧:1、2。基于这些，下面是一个用法示例(基于这里):
<SCRIPT TYPE="text/javascript">//<!--
function submitenter(myfield,e) {
var keycode;
if (window.event) {
keycode = window.event.keyCode;
} else if (e) {
keycode = e.which;
} else {
return true;
}
if (keycode == 13) {
myfield.form.submit();
return false;
} else {
return true;
}
}
//--></SCRIPT>
<INPUT NAME="MyText" TYPE="Text" onKeyPress="return submitenter(this,event)" />
如果默认使用的第一个按钮在各个浏览器中是一致的，那么在源代码中将它们放在正确的位置，然后使用CSS来切换它们的明显位置。
例如，将它们左右浮动以在视觉上切换它们。
你可以用CSS来做。
首先在标记中放入Next按钮，然后是Prev按钮。
然后使用CSS来定位它们以显示您想要的方式。
从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>
