HTML表单上的多个提交button – 默认指定一个button
我有一个表单有三个提交button，如下所示：
<input type="submit" name="COMMAND" value="‹ Prev"> <input type="submit" name="COMMAND" value="Save"> <input type="reset" name="NOTHING" value="Reset"> <input type="submit" name="COMMAND" value="Next ›"> <input type="button" name="NOTHING" value="Skip ›" onclick="location = 'yada-yada.asp';"> 这排button是提交，重置和JavaScriptbutton的混合。 button顺序可能会改变，但无论如何保存button保持在prev和nextbutton之间。 这里的问题是当用户点击“enter”提交表单时，postvariables“COMMAND”包含“Prev”; 正常，因为这是表单上的第一个提交button。 然而，我希望当用户通过inputbutton提交表单时触发“下一步”button。 有点像把它设置为默认的提交button，即使它之前有其他button。
我的build议是不要打这个行为。 你可以有效地改变使用浮动的顺序。 例如：
<p id="buttons"> <input type="submit" name="next" value="Next"> <input type="submit" name="prev" value="Previous"> </p>
有：
#buttons { overflow: hidden; } #buttons input { float: right; }
将有效地颠倒顺序，因此“下一步”button将成为按回车触发的值。
这种技术将涵盖许多情况下，而不必采取更多的黑莓JavaScript方法。
第一个button总是默认的; 它不能被改变。 虽然您可以尝试使用JavaScript进行修复，但在没有脚本的情况下，表单在浏览器中会performanceexception，并且有一些可用性/可访问性的案例需要思考。 例如，由Zoran链接的代码会意外地在inputbutton上提交一个<input type="button"> ，这通常不会发生，并且不会捕获IE提交表单的行为。其他非字段内容的forms。 所以，如果你点击<p>中的一些文本，然后按回车键，那么错误的button将会被提交…特别危险，如果在这个例子中给出了真正的默认button是'删除'！
我的build议是忘记使用脚本黑客重新分配默认。 使用浏览器的stream程，并首先放置默认button。 如果你不能破解布局来给你想要的屏幕顺序，那么你可以通过首先在源文件中设置一个虚拟的不可见button来实现，它具有与你想要默认的button相同的名称/值：
<input type="submit" class="defaultsink" name="COMMAND" value="Save" /> .defaultsink { position: absolute; left: -100%; }
（注意：定位是用来将button从屏幕上推下来的，因为display: none和visibility: hidden对于button是否被设置为默认值以及是否被提交了浏览器variables的副作用。
Quick'n'dirty你可以创build一个提交button的隐藏副本，当按下Enter键时应该使用这个副本。
示例CSS
input.hidden { width: 0px; height: 0px; margin: 0px; padding: 0px; outline: none; border: 0px; }
HTML示例
<input type="submit" name="next" value="Next" class="hidden" /> <input type="submit" name="prev" value="Previous" /> <input type="submit" name="next" value="Next" />
如果有人点击进入您的表单，（隐藏）下一个button将被用作提交者。
testingIE9，Firefox，Chrome和Opera
如果你使用的是jQuery，这个解决scheme来自这里的评论是非常光滑的：
$(function(){ $('form').each(function () { var thisform = $(this); thisform.prepend(thisform.find('button.default').clone().css({ position: 'absolute', left: '-999px', top: '-999px', height: 0, width: 0 })); }); });
只需将class="default"添加到您想要作为默认值的button即可。 它将该button的隐藏副本放在表单的开头。
设置type=submit到你想要默认的type=button ，并type=button到其他button。 现在在下面的表单中，您可以在任何input字段中inputEnter，并且Renderbutton将工作（尽pipe它是表单中的第二个button）。
例：
<button id='close_button' class='btn btn-success' type=button> <span class='glyphicon glyphicon-edit'> </span> Edit program </button> <button id='render_button' class='btn btn-primary' type=submit> <!-- Here we use SUBMIT, not BUTTON --> <span class='glyphicon glyphicon-send'> </span> Render </button>
testingFF24和Chrome 35。
我想这是你要找的。 这里的示例捕获给定input上的回车键，并提交表单，就好像用户点击了css类被设置为“default”的button元素一样。
我正在复活这个，因为我正在研究一个非JavaScript的方式来做到这一点。 我没有进入关键的处理程序，CSS定位的东西导致制表符sorting，因为CSS重新定位不会改变制表符顺序。
我的解决scheme基于https://stackoverflow.com/a/9491141上的响应。;
解决scheme来源如下。 tabindex用于纠正隐藏button的选项卡行为，以及隐藏的咏叹调，以避免由屏幕阅读器读取button/由辅助设备标识。
<form method="post" action=""> <button type="submit" name="useraction" value="2nd" class="default-button-handler" aria-hidden="true" tabindex="-1"></button> <div class="form-group"> <label for="test-input">Focus into this input: </label> <input type="text" id="test-input" class="form-control" name="test-input" placeholder="Focus in here and press enter / go" /> </div>
DOM中第一个buttonDOM中第二个buttonDOM第三个button
这个解决scheme的基本CSS：
.default-button-handler { width: 0; height: 0; padding: 0; border: 0; margin: 0; }
另一个解决scheme，使用jQuery：
$(document).ready(function() { $("input").keypress(function(e) { if (e.which == 13) { $('#submit').click(); return false; } return true; }); });
这应该工作在以下forms，使“更新”的默认行动：
<form name="f" method="post" action="/action"> <input type="text" name="text1" /> <input type="submit" name="button2" value="Delete" /> <input type="submit" name="button1" id="submit" value="Update" /> </form>
以及：
<form name="f" method="post" action="/action"> <input type="text" name="text1" /> <button type="submit" name="button2">Delete</button> <button type="submit" name="button1" id="submit">Update</button> </form>
只有在窗体上的input字段具有焦点时，才会捕获Enter键。
你不应该使用同名的button。 这是不好的语义。 相反，您应该修改后端以查找正在设置的不同名称值：
<input type="submit" name="COMMAND_PREV" value="‹ Prev"> <input type="submit" name="COMMAND_SAVE" value="Save"> <input type="reset" name="NOTHING" value="Reset"> <input type="submit" name="COMMAND_NEXT" value="Next ›"> <input type="button" name="NOTHING" value="Skip ›" onclick="window.location = 'yada-yada.asp';">
由于我不知道你在后端使用什么语言，我会给你一些伪代码：
if (input name COMMAND_PREV is set) { } else if (input name COMMAND_SAVE is set) { } else if (input name COMMENT_NEXT is set) { }
bobince的解决scheme的缺点是创build一个可以Tab键的button，但无法使用。 这可能会给键盘用户造成混淆。
不同的解决scheme是使用鲜为人知的form属性：
<form> <input name="data" value="Form data here"> <input type="submit" name="do-secondary-action" form="form2" value="Do secondary action"> <input type="submit" name="submit" value="Submit"> </form> <form id="form2"></form>
这是标准的HTML ，但不幸的是在Internet Explorer中不支持。
