假设您在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来做这个吗?
当前回答
从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>
其他回答
使用JavaScript(这里是jQuery)，您可以在提交表单之前禁用prev按钮。
$('form').on('keypress', function(event) {
if (event.which == 13) {
$('input[name="prev"]').prop('type', 'button');
}
});
我用这种方法解决了一个非常相似的问题:
If JavaScript is enabled (in most cases nowadays) then all the submit buttons are "degraded" to buttons at page load via JavaScript (jQuery). Click events on the "degraded" button typed buttons are also handled via JavaScript. If JavaScript is not enabled then the form is served to the browser with multiple submit buttons. In this case hitting Enter on a textfield within the form will submit the form with the first button instead of the intended default, but at least the form is still usable: you can submit with both the prev and next buttons.
工作的例子:
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> </head> <body> <form action="http://httpbin.org/post" method="post"> If JavaScript is disabled, then you CAN submit the form with button1, button2 or button3. If you press enter on a text field, then the form is submitted with the first submit button. If JavaScript is enabled, then the submit typed buttons without the 'defaultSubmitButton' style are converted to button typed buttons. If you press Enter on a text field, then the form is submitted with the only submit button (the one with class defaultSubmitButton) If you click on any other button in the form, then the form is submitted with that button's value. <br /> <input type="text" name="text1" ></input> <button type="submit" name="action" value="button1" >button 1</button> <br /> <input type="text" name="text2" ></input> <button type="submit" name="action" value="button2" >button 2</button> <br /> <input type="text" name="text3" ></input> <button class="defaultSubmitButton" type="submit" name="action" value="button3" >default button</button> </form> <script> $(document).ready(function(){ /* Change submit typed buttons without the 'defaultSubmitButton' style to button typed buttons */ $('form button[type=submit]').not('.defaultSubmitButton').each(function(){ $(this).attr('type', 'button'); }); /* Clicking on button typed buttons results in: 1. Setting the form's submit button's value to the clicked button's value, 2. Clicking on the form's submit button */ $('form button[type=button]').click(function( event ){ var form = event.target.closest('form'); var submit = $("button[type='submit']",form).first(); submit.val(event.target.value); submit.click(); }); }); </script> </body> </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
我认为这是一个简单的解决方法。将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代码中的提交按钮之后，但将其浮动到左侧，这样它就会出现在提交按钮之前的页面上。
要做到这一点，只需改变制表符顺序即可。保持简单。
