假设您在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来做这个吗?
当前回答
我用这种方法解决了一个非常相似的问题:
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>
其他回答
我用这种方法解决了一个非常相似的问题:
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>
如果你在一个页面上有多个活动按钮，你可以这样做:
将您想要在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>
你可以用CSS来做。
首先在标记中放入Next按钮，然后是Prev按钮。
然后使用CSS来定位它们以显示您想要的方式。
给你的提交按钮设置相同的名称，就像这样:
<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
参考:在一个表单上使用多个提交按钮
将之前的按钮类型更改为这样的按钮:
<input type="button" name="prev" value="Previous Page" />
现在Next按钮将是默认的，另外你也可以添加默认属性，这样你的浏览器就会高亮显示它:
<input type="submit" name="next" value="Next Page" default />
