HTML 表单上的多个提交按钮-指定一个按钮作为默认按钮

我有一个表格，有三个提交按钮，如下:

<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';">

按钮行由提交、重置和 JavaScript 按钮组成。按钮的顺序可能会发生变化，但是在任何情况下，保存按钮仍然保留在上一个按钮和下一个按钮之间。

这里的问题是，当用户点击 Enter提交表单时，发布变量“ COMMAND”包含“ Prev”; 正常情况下，因为这是表单上的第一个提交按钮。但是，我希望当用户通过 Enter按钮提交表单时触发“ Next”按钮。这有点像将它设置为默认的提交按钮，尽管在它之前还有其他按钮。

125249 次浏览
小开

您不应该使用相同名称的按钮。这是不好的语义。相反，您应该修改后端以查找正在设置的不同名称值:

<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) {


}
小开
最佳答案

我的建议是不要反对这种行为。你可以有效地使用浮点数来改变顺序。例如:

<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; }

将有效地扭转顺序，因此，“下一步”按钮将触发的价值，按下进入。

这种技术可以覆盖许多情况，而不必求助于更多蹩脚的 JavaScript 方法。

小开

第一个按钮始终是默认的; 不能更改。当您尝试使用 JavaScript 修复 可以时，表单在没有脚本的浏览器中会出现意外的行为，并且需要考虑一些可用性/可访问性的角落情况。例如，Zoran 链接到的代码会意外地在回车按下 <input type="button">键时提交表单，这在正常情况下是不会发生的，并且不会捕捉到 IE 在表单中其他非字段内容上提交回车按下表单的行为。因此，如果你点击一个 <p>表单中的一些文本和脚本，按下回车键，错误的按钮将被提交... 特别是危险的，如果给出的例子，真正的默认按钮是’删除’！

我的建议是忘记使用脚本技巧来重新分配缺省值。随着浏览器的流程，只要把默认按钮放在第一位。如果你不能修改布局来得到你想要的屏幕顺序，那么你可以通过在源代码中首先有一个虚拟的不可见按钮来实现，这个按钮的名称/值与你想要默认的按钮相同:

<input type="submit" class="defaultsink" name="COMMAND" value="Save" />


.defaultsink {
position: absolute; left: -100%;
}

(注意: 定位用于将按钮推出屏幕，因为 display: none和 visibility: hidden对于按钮是否默认以及是否提交都有浏览器可变的副作用。)

小开

如果你使用的是 jQuery，那么这个来自 给你注释的解决方案非常漂亮:

$(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"添加到您希望成为默认按钮的按钮中。它将该按钮的隐藏副本放在窗体的开头。

小开

Quick’n’Dirty 您可以创建一个隐藏的提交按钮副本，当按回车键时应该使用这个副本。

示例 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" />

如果有人现在点击您的表单中的回车，(隐藏)下一个按钮将被用作提交者。

在 IE9，Firefox，Chrome 和 Opera 上测试

小开

将 type=submit设置为默认按钮，将 type=button设置为其他按钮。现在在下面的表单中，您可以在任何输入字段中单击 Enter，并且 Render按钮将工作(尽管它是表单中的第二个按钮)。

例如:

    <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>

在 FF24和 Chrome35中测试。

小开

另一个解决方案，使用 jQuery:

$(document).ready(function() {
$("input").keypress(function(e) {
if (e.which == 13) {
$('#submit').click();
return false;
}


return true;
});
});

这应该适用于以下表格，使“更新”成为默认操作:

<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>

只有当表单上的输入字段具有焦点时，才会捕获 Enter 键。

小开

Bobince 的解决方案有创建一个按钮的缺点，这个按钮可以是 Tab-d over，但是在其他情况下不能使用。这会给键盘用户造成困惑。

另一种解决方案是使用鲜为人知的 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 中不支持。

小开

我重新启用这个功能是因为我正在研究一种非 JavaScript 的方法来实现这个功能。我不喜欢键处理程序，而且 CSS 定位的东西会导致标签顺序中断，因为 CSS 重新定位不会改变标签顺序。

我的解决方案是基于 https://stackoverflow.com/a/9491141的响应。

解决方案来源如下。Tabindex 用于纠正隐藏按钮的制表符行为，以及 aria-hide，以避免按钮被屏幕阅读器读出/被辅助设备识别。

<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 中的第一个按钮 DOM 中的第二个按钮 DOM 中的第三个按钮

这个解决方案的基本 CSS:

.default-button-handler {
width: 0;
height: 0;
padding: 0;
border: 0;
margin: 0;
}

提交答案