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

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

提问by Salman A

I have a form that has three submit buttons as follows:

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

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

The row of buttons is a mix of submit, reset and JavaScript buttons. The order of buttons is subject to change, but in any case the save button remains between prev and next buttons.

按钮行混合了提交、重置和 JavaScript 按钮。按钮的顺序可能会发生变化，但在任何情况下，保存按钮都保留在上一个和下一个按钮之间。

The problem here is that when a user hits Enterto submit the form, the post variable "COMMAND" contains "Prev"; normal, as this is the first submit button on the form. I however want the "Next" button to be triggered when the user submits the form via the Enterbutton. It is kind of like setting it as the default submit button, even though there are other buttons before it.

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

采纳答案by cletus

My suggestion is don't fight this behaviour. You can effectively alter the order using floats. For example:

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

<p id="buttons">
<input type="submit" name="next" value="Next">
<input type="submit" name="prev" value="Previous">
</p>

with:

和：

#buttons { overflow: hidden; }
#buttons input { float: right; }

will effectively reverse the order and thus the "Next" button will be the value triggered by hitting enter.

将有效地颠倒顺序，因此“下一步”按钮将是按回车触发的值。

This kind of technique will cover many circumstances without having to resort to more hacky JavaScript methods.

这种技术将涵盖许多情况，而不必求助于更 h​​acky 的 JavaScript 方法。

回答by bobince

The first button is always the default; it can't be changed. Whilst you cantry to fix it up with JavaScript, the form will behave unexpectedly in a browser without scripting, and there are some usability/accessibility corner cases to think about. For example, the code linked to by Zoran will accidentally submit the form on Enter press in a <input type="button">, which wouldn't normally happen, and won't catch IE's behaviour of submitting the form for Enter press on other non-field content in the form. So if you click on some text in a <p>in the form with that script and press Enter, the wrong button will be submitted... especially dangerous if, as given in that example, the real default button is ‘Delete'!

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

My advice would be to forget about using scripting hacks to reassign defaultness. Go with the flow of the browser and just put the default button first. If you can't hack the layout to give you the on-screen order you want, then you can do it by having a dummy invisible button first in the source, with the same name/value as the button you want to be default:

我的建议是忘记使用脚本技巧来重新分配默认值。顺应浏览器的流程，只需将默认按钮放在首位。如果您无法修改布局以提供您想要的屏幕顺序，那么您可以通过在源中首先使用一个虚拟的不可见按钮来实现，其名称/值与您希望成为默认按钮的名称/值相同：

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

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

(note: positioning is used to push the button off-screen because display: noneand visibility: hiddenhave browser-variable side-effects on whether the button is taken as default and whether it's submitted.)

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

回答by dmitry_romanov

Set type=submitto the button you'd like to be default and type=buttonto other buttons. Now in the form below you can hit Enter in any input fields, and the Renderbutton will work (despite the fact it is the second button in the form).

设置type=submit为您希望成为默认type=button按钮的按钮和其他按钮。现在在下面的表单中，您可以在任何输入字段中按 Enter，该Render按钮将起作用（尽管它是表单中的第二个按钮）。

Example:

例子：

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

Tested in FF24 and Chrome 35.

在 FF24 和 Chrome 35 中测试。

回答by scotty86

Quick'n'dirty you could create an hidden duplicate of the submit-button, which should be used, when pressing enter.

Quick'n'dirty 你可以创建一个隐藏的提交按钮的副本，当按下回车键时应该使用它。

Example CSS

示例 CSS

input.hidden {
    width: 0px;
    height: 0px;
    margin: 0px;
    padding: 0px;
    outline: none;
    border: 0px;
}

Example HTML

示例 HTML

<input type="submit" name="next" value="Next" class="hidden" />
<input type="submit" name="prev" value="Previous" />
<input type="submit" name="next" value="Next" />

If someone now hits enter in your form, the (hidden) next-button will be used as submitter.

如果现在有人在您的表单中按 Enter，（隐藏的）下一步按钮将用作提交者。

Tested on IE9, Firefox, Chrome and Opera

在 IE9、Firefox、Chrome 和 Opera 上测试

回答by Dave

If you're using jQuery, this solution from a comment made hereis pretty slick:

如果您使用的是 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
        }));
    });
});

Just add class="default"to the button you want to be the default. It puts a hidden copy of that button right at the beginning of the form.

只需添加class="default"到您希望成为默认按钮的按钮即可。它将该按钮的隐藏副本放在表单的开头。

回答by Shan Plourde

I'm resurrecting this because I was researching a non-JavaScript way to do this. I wasn't into the key handlers, and the CSS positioning stuff was causing tab ordering to break since CSS repositioning doesn't change tab order.

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

My solution is based on the response at https://stackoverflow.com/a/9491141.

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

The solution source is below. tabindex is used to correct tab behaviour of the hidden button, as well as aria-hidden to avoid having the button read out by screen readers / identified by assistive devices.

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

1st button in DOM 2nd button in DOM 3rd button in DOM

DOM 中的第一个按钮 DOM 中的第二个按钮 DOM 中的第三个按钮

Essential CSS for this solution:

此解决方案的基本 CSS：

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

回答by Dave Jarvis

Another solution, using jQuery:

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

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

    return true;
  });
});

This should work on the following forms, making "Update" the default action:

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

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

As well as:

也：

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

This traps the Enter key only when an input field on the form has focus.

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

回答by Corey Ballou

You should not be using buttons of the same name. It's bad semantics. Instead, you should modify your backend to look for different name values being set:

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

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

Since I don't know what language you are using on the backend, I'll give you some pseudocode:

由于不知道你后端用的是什么语言，我给你一些伪代码：

if (input name COMMAND_PREV is set) {

} else if (input name COMMAND_SAVE is set) {

} else if (input name COMMENT_NEXT is set) {

}

回答by Vladimir Panteleev

bobince's solution has the downside of creating a button which can be Tab-d over, but otherwise unusable. This can create confusion for keyboard users.

bobince 的解决方案有一个缺点，即创建一个可以Tab-d 结束的按钮，但否则无法使用。这会给键盘用户造成混淆。

A different solution is to use the little-known formattribute:

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

This is standard HTML, however unfortunately not supported in Internet Explorer.

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