HTML表单上的多个提交button – 默认指定一个button

我有一个表单有三个提交button,如下所示:

<input type="submit" name="COMMAND" value="&lsaquo; Prev"> <input type="submit" name="COMMAND" value="Save"> <input type="reset" name="NOTHING" value="Reset"> <input type="submit" name="COMMAND" value="Next &rsaquo;"> <input type="button" name="NOTHING" value="Skip &rsaquo;" 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: nonevisibility: 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="&lsaquo; Prev"> <input type="submit" name="COMMAND_SAVE" value="Save"> <input type="reset" name="NOTHING" value="Reset"> <input type="submit" name="COMMAND_NEXT" value="Next &rsaquo;"> <input type="button" name="NOTHING" value="Skip &rsaquo;" 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中不支持。