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”; 正常，因为这是表单上的第一个提交按钮。然而，当用户通过输入按钮提交表单时，我想要触发”Next” 按钮。类似于将其设置为默认提交按钮，即使之前还有其他按钮。

最佳解决方案

我的建议是不要打这个行为。您可以使用浮标有效地更改订单。例如：

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

将有效地反转顺序，因此”Next” 按钮将是通过按 Enter 键触发的值。

这种技术将涵盖许多情况，而无需诉诸更多 hacky Javascript 方法。

次佳解决方案

第一个按钮总是默认的; 它不能改变。虽然您可以尝试使用 JavaScript 进行修复，但是在没有脚本的浏览器中，表单将会出现意外，并且还有一些可用性/可访问性角色的情况需要考虑。例如，由 Zoran 链接的代码将意外地在<input type="button"> 中输入新闻中的表单，这通常不会发生，并且不会捕获 IE 的行为，以表单的形式向其他 non-field 内容提交输入表单。因此，如果您使用该脚本单击<p> 中的某些文本，然后按 Enter 键，将会提交错误的按钮… 如果在该示例中给出了真正的默认按钮为「删除」，则会特别危险。

我的建议是忘记使用脚本攻击来重新设置默认值。随着浏览器的流动，只需先放置默认按钮。如果您无法使用布局给出您想要的 on-screen 命令，那么可以先在源代码中创建一个虚拟的不可见按钮，其名称/值与您要默认的按钮相同：

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

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

(注意：定位用于按下按钮 off-screen，因为 display: none 和 visibility: hidden 有 browser-variable side-effects 是否将该按钮作为默认值以及是否提交。)

第三种解决方案

Quick’n’dirty 你可以创建一个隐藏的副本的 submit-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" />

如果有人现在进入您的表单，(隐藏)next-button 将被用作提交者。

经过 IE9，Firefox，Chrome 和 Opera 测试

第四种方案

如果你使用 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"添加到要默认的按钮即可。它在表单的开始处放置该按钮的隐藏副本。

第五种方案

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

第六种方案

我想 this 是你要找的。这个示例在给定的输入上收集了回车键，并提交了表单，就像用户点击了 CSS 类设置为’default’ 的按钮元素一样。

参考文献

Multiple submit buttons on HTML form – designate one button as default

注：本文内容整合自 Google/Baidu/Bing 辅助翻译的英文资料结果。如果您对结果不满意，可以加入我们改善翻译效果：薇晓朵技术论坛。

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