it-swarm.asia

如何确定HTML表单上的默认提交按钮?

如果表单已提交但未通过任何特定按钮提交,例如

  • 按下 Enter
  • 在JS中使用HTMLFormElement.submit()

浏览器应该如何确定多个提交按钮中的哪一个(如果有的话)用作按下的按钮?

这在两个层面上很重要:

  • 调用附加到提交按钮的onclick事件处理程序
  • 数据发送回Web服务器

到目前为止,我的实验表明:

  • 按下时 Enter,Firefox,Opera和Safari使用表单中的第一个提交按钮
  • 按下时 Enter,IE使用第一个提交按钮或根本不使用,具体取决于我无法弄清楚的条件
  • 所有这些浏览器根本不使用JS提交

标准说什么?

如果它有帮助,这是我的测试代码(PHP仅与我的测试方法相关,而不是我的问题本身)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test</title>
</head>

<body>

<h1>Get</h1>
<dl>
<?php foreach ($_GET as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<h1>Post</h1>
<dl>
<?php foreach ($_POST as $k => $v) echo "<dt>$k</dt><dd>$v</dd>"; ?>
</dl>

<form name="theForm" method="<?php echo isset($_GET['method']) ? $_GET['method'] : 'get'; ?>" action="<?php echo $_SERVER['SCRIPT_NAME']; ?>">
    <input type="text" name="method" />
    <input type="submit" name="action" value="Button 1" onclick="alert('Button 1'); return true" />
    <input type="text" name="stuff" />
    <input type="submit" name="action" value="Button 2" onclick="alert('Button 2'); return true" />
    <input type="button" value="submit" onclick="document.theForm.submit();" />
</form>

</body></html>
197
Stewart

如果您通过Javascript(即formElement.submit()或任何等效的)提交表单,则提交按钮的 none 被认为是成功的,并且它们的值都不包含在提交的数据中。 (请注意,如果您使用submitElement.click()提交表单,那么您引用的提交被认为是活动的;这并不属于您的问题的范围,因为这里的提交按钮是明确的,但我认为我会包括它适用于那些阅读第一部分并想知道如何通过JS表单提交成功提交按钮的人。当然,表单的onsubmit处理程序仍将以这种方式触发,而它们不会通过form.submit()而这是另一个水壶... )

如果通过在非textarea字段中按Enter键来提交表单,那么它实际上是由用户代理决定它想要的内容。 specs 没有说明在文本输入字段中使用回车键提交表单的任何内容(如果您选择按钮并使用空格或其他任何方式激活它,那么没有问题,因为特定的提交按钮是毫不含糊地使用)。所有这一切都表明,当激活提交按钮时必须提交表单,甚至不要求输入例如文本输入将提交表单。

我相信Internet Explorer会选择首先出现在源中的提交按钮;我有一种感觉,Firefox和Opera选择具有最低tabindex的按钮,如果没有其他定义,则回退到第一个定义的按钮。关于提交是否具有非默认值属性IIRC,也存在一些复杂性。

需要注意的是,对于此处发生的事情没有明确的标准,而且完全是浏览器的一时兴起 - 所以尽可能在你正在做的事情中,尽量避免依赖任何特定的行为。如果你真的必须知道,你可能会发现各种浏览器版本的行为,但是当我调查这一段时间后,有一些非常复杂的条件(当然可能会随着新的浏览器版本而改变)并且我建议如果可能的话,你要避免它!

105
Andrzej Doyle

Andrezj几乎已经把它钉上了......但是这是一个简单的跨浏览器解决方案。

采取这样的形式:

<form>
    <input/>
    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>

    <button type="submit" value="default action"/>
</form>

并重构:

<form>
    <input/>

    <button style="overflow: visible !important; height: 0 !important; width: 0 !important; margin: 0 !important; border: 0 !important; padding: 0 !important; display: block !important;" type="submit" value="default action"/>

    <button type="submit" value="some non-default action"/>
    <button type="submit" value="another non-default action"/>
    <button type="submit" value="yet another non-default action"/>
    <button type="submit" value="still another non-default action"/>

    <button type="submit" value="default action"/>
</form>

由于W3C规范表明多个提交按钮有效,但忽略了用户代理应如何处理它们的指导,因此浏览器制造商可以按照自己的意愿实施。我发现他们要么在表单中提交第一个提交按钮,要么在当前具有焦点的表单字段之后提交下一个提交按钮。

不幸的是,只需添加样式 display:none; 将无效,因为W3C规范指出应从用户交互中排除任何隐藏元素。所以隐藏在明显的视线中!

以上是我最终投入生产的解决方案示例。按Enter键触发默认表单提交是预期的行为,即使存在其他非默认值并且在DOM中的默认提交按钮之前。鼠标/键盘与显式用户输入交互的奖励,同时避免使用javascript处理程序。

注意:通过表单的Tab键不会显示任何可视元素的焦点,但仍会导致选择不可见的按钮。要避免此问题,只需相应地设置tabindex属性,并在不可见的提交按钮上省略tabindex属性。虽然将这些样式推广到重要部分似乎不合适,但它们 应该 阻止任何框架或现有按钮样式干扰此修复。此外,那些内联样式肯定是糟糕的形式,但我们在这里证明了概念...不编写生产代码。

59
James

HTML 4没有明确说明。当前的HTML5工作草案 指定第一个提交按钮必须是默认值

form元素的默认按钮是第一个 提交按钮 in 树顺序表单所有者form元素。

如果用户代理支持让用户隐式提交表单(例如,在某些平台上按下“enter”键而文本字段被聚焦时隐式提交表单),那么这样做是为了一个表单的 默认按钮 具有已定义的 激活行为 必须使用户代理执行 运行合成点击激活步骤 on 默认按钮

57
Quentin

我想如果有人想用jQuery做这篇文章会有所帮助:

http://greatwebguy.com/programming/dom/default-html-button-submit-on-enter-with-jquery/

基本解决方案是:

$(function() {
    $("form input").keypress(function (e) {
    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
        $('input[type=submit].default').click();
        return false;
    } else {
        return true;
    }
    });
});

另一个我喜欢的是:

jQuery(document).ready(function() {
$("form input, form select").live('keypress', function (e) {
if ($(this).parents('form').find('button[type=submit].default, input[type=submit].default').length <= 0)
return true;

if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
$(this).parents('form').find('button[type=submit].default, input[type=submit].default').click();
return false;
} else {
return true;
}
});
}); 
16
Rodrigo Caballero

我有一个带有11个提交按钮的表单,当用户按下回车键时,它总是会使用第一个提交按钮。我在别处读到,在表单上有多个提交按钮不是一个好主意(不好的做法),最好的方法是将默认按钮作为表单上的唯一提交按钮。其他按钮应设置为“TYPE = BUTTON”,并添加一个onClick事件,在Javascript中调用您自己的提交例程。像这样: -

<SCRIPT Language="JavaScript">
function validform()
{
  // do whatever you need to validate the form, and return true or false accordingly
}

function mjsubmit()
{
  if (validform()) { document.form1.submit(); return true;}
  return false;
}
</SCRIPT>
<INPUT TYPE=BUTTON NAME="button1" VALUE="button1" onClick="document.form1.submitvalue='button1'; return mjsubmit();">
<INPUT TYPE=BUTTON NAME="button2" VALUE="button2" onClick="document.form1.submitvalue='button2'; return mjsubmit();">
<INPUT TYPE=SUBMIT NAME="button3" VALUE="button3" onClick="document.form1.submitvalue='button3'; return validform();">
<INPUT TYPE=BUTTON NAME="button4" VALUE="button4" onClick="document.form1.submitvalue='button4'; return mjsubmit();">

这里,button3是默认设置,虽然您以编程方式使用其他按钮提交表单,但mjsubmit例程会验证它们。 HTH。

6
graphic

现在可以使用 flexbox 来解决这个问题:

_ html _

<form>
    <h1>My Form</h1>
    <label for="text">Input:</label>
    <input type="text" name="text" id="text"/>

    <!-- Put the elements in reverse order -->
    <div class="form-actions">
        <button>Ok</button> <!-- our default action is first -->
        <button>Cancel</button>
    </div>
</form>

_ css _

.form-actions {
    display: flex;
    flex-direction: row-reverse; /* reverse the elements inside */
}

解释
使用弹性框,我们可以通过使用CSS规则来反转使用display: flex的容器中元素的顺序:flex-direction: row-reverse。这不需要CSS或隐藏元素。对于不支持flexbox的旧版浏览器,它们仍然可以获得可行的解决方案,但这些元素不会被颠倒。

演示
http://codepen.io/Godwin/pen/rLVKjm

5
Godwin

我在同一个问题上挣扎,因为我在重定向提交到另一个页面的中间提交了按钮,如下所示:

<button type="submit" onclick="this.form.action = '#another_page'">More</button>

当用户按下回车键时,单击此按钮而不是另一个提交按钮。

所以我做了一些原始测试,创建了一个带有多个提交按钮和不同的可见性选项的on和onclick事件警报点击了哪个按钮: https://jsfiddle.net/aqfy51om/1/

我用于测试的浏览器和操作系统:

_ windows _

  • 谷歌Chrome 43(来吧谷歌:D)
  • Mozilla Firefox 38
  • Internet Explorer 11
  • Opera 30.0

_ osx _

  • 谷歌浏览器43
  • Safari 7.1.6

尽管应用了可见性选项,但大多数浏览器都点击了第一个按钮 exept IE和Safari 它点击了第三个按钮,它在“隐藏”容器内是“可见的”:

<div style="width: 0; height: 0; overflow: hidden;">
    <button type="submit" class="btn btn-default" onclick="alert('Hidden submit button #3 was clicked');">Hidden submit button #3</button>
</div>

所以我的建议,我将自己使用,是:

如果您的表单有多个具有不同含义的提交按钮,则在表单的开头包含带有默认操作的提交按钮,该按钮是:

  1. 完全可见
  2. style="width: 0; height: 0; overflow: hidden;"包装在一个容器中

_ edit _ 另一个选项可能是偏移按钮(仍然在from的开头)style="position: absolute; left: -9999px; top: -9999px;",只是在IE中尝试过_ - 工作,但我不知道还有什么呢可以拧紧,例如打印..

2
Kristian

当您在单个表单中有多个提交按钮并且用户按下ENTER键以从文本字段提交表单时,此代码将通过从按键事件调用表单上的提交事件来覆盖默认功能。这是代码:

$('form input').keypress(function(e){

    if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)){ $(e.target).closest('form').submit(); return false; }
    else return true;

});
1
axiom82

从你的评论:

结果是,如果您有多个表单提交到同一个脚本,则不能依赖提交按钮来区分它们。

我将<input type="hidden" value="form_name" />放入每个表单中。

如果使用javascript提交:向表单添加提交事件,而不是单击事件到其按钮。 Saavy用户不经常触摸他们的鼠标。

1
Ryan Florence

奇怪的是第一个按钮 输入 始终是第一个按钮,无论是否可见,例如使用jquery show/hide()。添加属性.attr('disabled', 'disabled')会阻止完全接收提交提交按钮。例如,在记录对话框中调整 插入/编辑+删除 按钮可见性时会出现问题。我找到了更少的hackish和简单的放置 编辑 在前面 插入

<button type="submit" name="action" value="update">Update</button>
<button type="submit" name="action" value="insert">Insert</button>
<button type="submit" name="action" value="delete">Delete</button>

并使用javascript代码:

$("#formId button[type='submit'][name='action'][value!='insert']").hide().attr('disabled', 'disabled');
$("#formId button[type='submit'][name='action'][value='insert']").show().removeAttr('disabled');
1
TMa

来自 HTML 4规范

如果表单包含多个提交按钮,则只有激活的提交按钮成功。

这意味着如果给出多于1个提交按钮且没有激活(单击),则不应该成功。

我认为这是有道理的:想象一个带有多个提交按钮的巨大形式。在顶部,有一个“删除此记录” - 按钮,然后输入大量输入,在底部有一个“更新此记录”按钮。用户在表单底部的字段中按Enter键将永远不会怀疑他隐含地从顶部点击“删除此记录”。

因此,我认为使用用户未定义的第一个或任何其他按钮(单击)一个不是一个好主意。然而,浏览器当然正在这样做。

0
Christopher K.

我的食谱:

<form>
<input type=hidden name=action value=login><!-- the magic! -->

<input type=text name=email>
<input type=text name=password>

<input type=submit name=action value=login>
<input type=submit name=action value="forgot password">
</form>

如果没有任何按钮被“点击”,它将发送默认的隐藏字段。

如果他们被点击,他们有偏好,并且它的价值被传递。

0
gcb

我使用的另一个解决方案是在表单中只有一个按钮,并伪造其他按钮。

这是一个例子:

<form>
  <label for="amount">Amount of items</label>
  <input id="amount" type="text" name="amount" />
  <span id="checkStock" class="buttonish">Check stock</span>
  <button type="submit" name="action" value="order">Place order</button>
</form>

然后我将span元素设置为看起来像一个按钮。 JS侦听器观察跨度并在单击后执行所需的操作。

不一定适合所有情况,但至少它很容易做到。

0
Johan Fredrik Varen