HTML 表单上的多个提交按钮 - 将一个按钮指定为默认按钮 [重复]

Question

我有一个包含三个提交按钮的表单，如下所示：

<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提交表单时，post变量“COMMAND”包含“Prev”；正常，因为这是表单上的第一个提交按钮。但是，我希望在用户通过 Enter 按钮提交表单时触发“下一步”按钮。这有点像将其设置为默认提交按钮，即使它之前还有其他按钮。

Answer 1

第一个按钮始终是默认按钮；它不能改变。虽然您可以尝试使用 JavaScript 修复它，但表单在没有脚本的浏览器中会出现意外行为，并且需要考虑一些可用性/可访问性的极端情况。例如，Zoran 链接的代码会在<input type="button"> 中意外地在 Enter 键中提交表单，这通常不会发生，并且不会捕获 IE 提交表单以在其他非字段内容上按 Enter 键的行为在表格中。因此，如果您使用该脚本在表单中单击 <p> 中的某些文本并按 Enter，则将提交错误的按钮……如果如该示例中给出的那样，真正的默认按钮是“删除”，则尤其危险！

我的建议是忘记使用脚本技巧来重新分配默认值。跟随浏览器的流程，只需将默认按钮放在第一位。如果您无法破解布局来为您提供所需的屏幕顺序，那么您可以通过在源代码中首先使用一个虚拟的不可见按钮来做到这一点，其名称/值与您想要默认的按钮相同：

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

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

（注意：定位用于将按钮按下屏幕外，因为display: none 和visibility: hidden 对按钮是否被视为默认以及是否已提交具有浏览器变量的副作用。）

Answer 2

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

<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 方法。

Answer 3

将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 和 Chrome 35 中测试。

Answer 4

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 上测试

Answer 5

如果您使用的是 jQuery，here 的评论中的这个解决方案非常巧妙：

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

Answer 6

我正在复活这个，因为我正在研究一种非 JavaScript 的方法来做到这一点。我没有进入关键处理程序，并且 CSS 定位的东西导致制表符顺序中断，因为 CSS 重新定位不会更改制表符顺序。

我的解决方案基于https://stackoverflow.com/a/9491141 的回复。

解决方案来源如下。 tabindex 用于纠正隐藏按钮的选项卡行为，以及 aria-hidden 以避免屏幕阅读器读出按钮/辅助设备识别按钮。

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

Answer 7

另一种解决方案，使用 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 键。

Answer 8

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

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

}

Answer 9

bobince 的解决方案的缺点是创建一个按钮，该按钮可以 Tab-d 结束，但在其他方面无法使用。这会给键盘用户造成混乱。

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

这是standard HTML，但遗憾的是 Internet Explorer 不支持。