如果提交了表单,但不是通过任何特定的按钮,例如

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

当前回答

我认为这篇文章会帮助如果有人想用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;
        }
    });
});

其他回答

HTML 4并没有将其显式化。HTML 5规定第一个提交按钮必须是默认的:

4.10.21.2隐式提交 表单元素的默认按钮是按树顺序排列的第一个提交按钮,其表单所有者就是该表单元素。 如果用户代理支持让用户隐式提交表单 (例如,在某些平台上,在输入文本时按下“enter”键 控件隐式地提交表单),然后为 表单,其默认按钮具有激活行为,但没有 禁用时,必须导致用户代理在此触发单击事件 默认按钮。

如果你想在保持视觉顺序的同时影响哪个是“第一个”,那么你可以采取一些方法。

一个屏幕外、无法对焦的按钮。

.hidden-default { 位置:绝对的; 左:-9999 px; } < >形式 <输入名称= " text " > <button name="submit" value="wanted" class="hidden-default" tabindex="-1"></button> <button name="submit" value="not wanted">不是默认值 <button name="submit" value="wanted">看起来像默认的</button> > < /形式

Flexbox顺序:

.ordering { 显示:inline-flex; } . ordered按钮{ 秩序:2; } .订购按钮+按钮{ 顺序:1; } < >形式 <输入名称= " text " > < div class = "排序" > <button name="submit" value="wanted">文件顺序第一个</button> <button name="submit" value="not wanted">在文档顺序中的第2位</button> . </button> . <button name="submit" value="not wanted < / div > > < /形式

If you submit the form via JavaScript (i.e., formElement.submit() or anything equivalent), then none of the submit buttons are considered successful and none of their values are included in the submitted data. (Note that if you submit the form by using submitElement.click() then the submit that you had a reference to is considered active; this doesn't really fall under the remit of your question since here the submit button is unambiguous but I thought I'd include it for people who read the first part and wonder how to make a submit button successful via JavaScript form submission. Of course, the form's onsubmit handlers will still fire this way whereas they wouldn't via form.submit() so that's another kettle of fish...)

If the form is submitted by hitting Enter while in a non-textarea field, then it's actually down to the user agent to decide what it wants here. The specifications don't say anything about submitting a form using the Enter key while in a text entry field (if you tab to a button and activate it using space or whatever, then there's no problem as that specific submit button is unambiguously used). All it says is that a form must be submitted when a submit button is activated. It's not even a requirement that hitting Enter in e.g. a text input will submit the form.

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

The point to take away is that there is no defined standard for what happens here and it's entirely at the whim of the browser - so as far as possible in whatever you're doing, try to avoid relying on any particular behaviour. If you really must know, you can probably find out the behaviour of the various browser versions, but when I investigated this a while back there were some quite convoluted conditions (which of course are subject to change with new browser versions) and I'd advise you to avoid it if possible!

奇怪的是,第一个按钮进入总是第一个按钮,无论是否可见,例如使用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');

要确定按enter键时按下了哪个按钮,可以用type="submit"标记它,其他按钮用type="button"标记它们。例如:

<input type="button" value="Cancel" />
<input type="submit" value="Submit" />

抱歉,当我写这个答案时,我想的是一般意义上的提交按钮。下面的答案不是关于多个type="submit"按钮,因为它只留下一个type="submit",而把另一个改为type="button"。我把答案留在这里作为参考,以防帮助可以更改表单类型的人。

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

这里有一个例子:

<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元素的样式设置为看起来像一个按钮。JavaScript侦听器观察跨度,并在单击后执行所需的操作。

这并不一定适用于所有情况,但至少很容易做到。