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

按下 Enter

HTMLFormElement.submit()在JS中使用

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

这在两个层面上很重要:

调用onclick附加到提交按钮的事件处理程序

数据发送回Web服务器

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

按下时Enter,Firefox,Opera和Safari使用表单中的第一个提交按钮

当按下时Enter,IE使用第一个提交按钮或根本不使用,这取决于我无法弄清楚的条件

所有这些浏览器根本不使用JS提交

标准说什么？

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

Get

 $v) echo "
$k
$v
"; ?>


Post

 $v) echo "
$k
$v
"; ?>



    
    
    
    
    

Andrzej Doyl.. 109

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

如果通过在非textarea字段中按Enter键来提交表单,那么它实际上是由用户代理决定它想要的内容.该规范不说如何使用,而在文本输入字段回车键提交表单什么(如果你标签的按钮,使用空间或任何激活它,然后还有为特定的提交按钮是没有问题的明确使用).它只是表示必须在激活提交按钮时提交表单,甚至不要求输入例如文本输入将提交表单.

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

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

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

如果通过在非textarea字段中按Enter键来提交表单,那么它实际上是由用户代理决定它想要的内容.该规范不说如何使用,而在文本输入字段回车键提交表单什么(如果你标签的按钮,使用空间或任何激活它,然后还有为特定的提交按钮是没有问题的明确使用).它只是表示必须在激活提交按钮时提交表单,甚至不要求输入例如文本输入将提交表单.

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

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

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

采取这样的形式:

并重构:

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

不幸的是,只需添加一种显示风格:无; 不起作用,因为W3C规范表明应该从用户交互中排除任何隐藏元素.所以隐藏在明显的视线中!

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

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

$(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;
}
});
}); 

    
My Form
    Input:
    

    
    

        Ok 
        Cancel
    

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