Question

2015年10月9日更新我的原始问题在下面并且不清楚，并且没有完全描述我的问题，因为它实际上是表单的双重提交（一次来自keyup事件而一次来自change事件，它专注于keypress事件监听器由输入键的<html> <head> <script src="https://code.jquery.com/jquery-2.1.4.js"></script> </head> <body> <form method="GET" action="#"> <input type="text" /> <input type="submit" /> </form> <script> $('form>input[type="text"]') // Change event triggered by both enter key and tab key .on('change', function (e) { e.preventDefault(); console.log('change event'); $('form').submit(); //This emulates a more complex ajax request }); $('form').submit(function (e) { // You will notice the console logs this twice if you hit enter instead of tab. console.log("form submitted"); }); </script> </body> </html>触发的隐式提交作为根本问题...我已经更多地审阅了代码，这里是一个展示我真正问题的例子：

keypress

如果您在输入框中输入内容并按Enter键，则您将在控制台中看到表单提交两次，一次来自更改事件，一次来自隐式提交浏览器。

我想停止提交两次的表单（你会注意到我已经在上面的代码中尝试过preventDefault）。答案似乎是要特别针对输入键的keyup（不是$(element) .on('keyup', function (e) { if (e.which === 13) { event.trigger(); } }); `）阻止默认（非常感谢@JotaBe）

原始问题
所以我在输入上有一个关于输入键的事件监听器，如此

[compute-0-10:21508] Signal: Segmentation fault (11)
[compute-0-10:21508] Signal code:  (128)
[compute-0-10:21508] Failing at address: (nil)

具体来说，代码来自this插件

根据W3 standard，这会干扰大多数浏览器标准的隐含提交，并导致表单提交两次。

我想知道的是，隐式提交是在事件监听器显式提交表单之前或之后发生的吗？

对于哪个版本（或者我在哪里可以找到哪个版本）做了隐含提交的奖励积分＆＃39;被添加到各种浏览器？（所以我知道我的代码可以兼容多久）

Answer 1

第二个问题

隐式提交虽然没有该名称，但至少存在于1995年novemeber HTML 2 specs的旧版本中。第8.2节的最后一行：

当表单中只有一个单行文本输入字段时，用户代理商应接受该字段中的Enter作为提交表单的请求。

因此，正如我们在西班牙所说的那样，与咳嗽一样古老。

然后，主要的东西

处理事件时，除非取消默认操作，否则当处理程序中的代码完成运行时，将执行默认操作。

您的代码正在触发事件，而不是取消defautl操作。这就是为什么提交发生两次，一次是处理事件，一次是附加触发事件。

对于jquery，您必须致电event.preventDefault()以避免执行默认操作。

请查看this fiddle以查看两件事：

1）By default, when you press enter on a form, the form is submitted更准确地说，它必须模拟表单第一个提交按钮的点击。因此，如果此按钮被禁用，或者不存在，则不会发生任何事情。

2）如果要阻止默认行为，则必须处理文本框上的按键（不是keydown或keyup）事件，并调用事件的preventDefault方法。

3）根据规范，这应该只在有一个文本框（文本类型，数字，日期，网址，电子邮件等）时才会发生。但它在大多数浏览器中都不会像这样工作，例如在桌面版Chrome 45，IE 10和FF27＆amp; FF33。 我没有测试其他版本。

小提琴代码：

// This suppres the default behavior of submitting the
// form when the enter key is pressed in the textbox
$('#form2').on('keypress', function (e) {
    if (e.which === 13) {
        e.preventDefault(); 
        console.log('key press 13');
    }
});

// This event is triggered when any form is submitted
// (in fact, the submission is prevented).
$('form').on('submit', function(e) {
    console.log('Sending form', e.target.name);
    e.preventDefault();
});

使用此HTML：

<div>
    <p>Form 1, default enter behavior, when there is only a textbox, and there is a submit button</p>
    <p>If you press enter, it's submitted</p>
    <form method="GET" id="form1">
        <input type="text" />
        <input type="submit" />
    </form>
</div>

<div>
    <p>Form 2: prevents default behavior on textbox</p>
    <p>If you press enter the form is not submitted</p>
    <form method="GET" id="form2">
        <input type="text" />
        <input type="submit" />
    </form>
</div>

<div>
    <p>Form 3: submit shuld only happen if there is only one textbox, but it depends on the browser</p>
    <p>If you press enter the form should not be submitted, because there are several textboxes, but I bet it will be submitted</p>
    <form method="GET" id="form3">
        <input type="text" />
        <input type="text" />
        <input type="submit" />
    </form>
</div>

Answer 2

添加全局变量，如

var submited = true;

验证

$(element)
.on('keyup', function (e) {
    if (submited) { 
        submited = false ;
        event.trigger(); 
    }
});

keyup 13事件重复隐含提交 - 在输入问题时提交表单

2 个答案:

第二个问题

然后，主要的东西