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按钮的混合.按钮的顺序可能会发生变化,但无论如何,保存按钮仍保留在prev按钮和下一个按钮之间.这里的问题是当用户点击"enter"提交表单时,post变量"COMMAND"包含"Prev"; 正常,因为这是表单上的第一个提交按钮.但是,当用户通过输入按钮提交表单时,我希望触发"下一步"按钮.有点像将其设置为默认提交按钮,即使它之前还有其他按钮.

Answer 1

第一个按钮始终是默认按钮; 它无法改变.虽然您可以尝试使用JavaScript进行修复,但表单在没有脚本的情况下会在浏览器中出现意外行为,并且需要考虑一些可用性/可访问性角落情况.例如,Zoran链接的代码会意外地在Enter中输入表单<input type="button">,这通常不会发生,并且不会捕获IE在表单中提交表单中的其他非字段内容的行为.因此,如果您<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; }

将有效地反转顺序,因此"下一步"按钮将是通过按Enter键触发的值.

这种技术将涵盖许多情况,而不必诉诸更多hacky 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,那么此处发表的评论的解决方案非常灵活:

$(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重新定位不会改变制表符顺序。

我的解决方案基于/sf/answers/664379901/上的响应。

解决方案的来源如下。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;
}