Javascript keyup 13事件重复暗示提交-输入问题时提交表单_Javascript_Jquery_Ajax_Forms

Javascript keyup 13事件重复暗示提交-输入问题时提交表单

javascript jquery ajax forms

Javascript keyup 13事件重复暗示提交-输入问题时提交表单,javascript,jquery,ajax,forms,Javascript,Jquery,Ajax,Forms,2015年10月9日更新我的原始问题在下面，不清楚，也没有完全描述我的问题，因为它关注的是keyup事件侦听器，而实际上它是表单的双重提交（一次来自change事件，一次来自由enter键的keypress触发的隐式提交）作为根本问题。。。我对代码进行了更多的审查，下面是一个示例，说明了我真正的问题： <html> <head> <script src="https://code.jquery.com/jquery-2.1.4.js"></sc

2015年10月9日更新
我的原始问题在下面，不清楚，也没有完全描述我的问题，因为它关注的是

keyup

事件侦听器，而实际上它是表单的双重提交（一次来自

change

事件，一次来自由enter键的

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>

具体来说，代码来自插件

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

我想知道的是，隐式提交是在向事件侦听器显式提交表单之前还是之后发生的

另外，“隐式提交”被添加到各种浏览器中的哪个版本（或者我在哪里可以找到哪个版本）是值得奖励的？（这样我就知道我的代码可以兼容多久了）

第一个问题是第二个问题隐式提交，虽然没有这个名字，至少从1995年11月起就存在了。第8.2节的最后几行：

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

所以，正如我们在西班牙所说，它和咳嗽一样古老

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

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

对于jquery，您必须调用它以避免执行默认操作

请查看以检查两件事：

1）更准确地说，它必须模拟单击表单的第一个提交按钮。因此，如果此按钮被禁用或不存在，则不会发生任何事情

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

preventDefault

方法

3）根据规范，只有当有一个文本框（文本、数字、日期、url、电子邮件等类型）时，才会发生这种情况。但它在大多数浏览器中都不是这样工作的，例如在Chrome45、IE 10和FF27&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>


表单1，默认输入行为，当只有一个文本框和一个提交按钮时
如果按enter键，它将被提交
表单2：防止文本框上的默认行为
如果按enter键，则不会提交表单
表单3：仅当只有一个文本框时才应提交，但这取决于浏览器
如果按enter键，表单将不会提交，因为有多个文本框，但我打赌它会提交

添加全局变量，如

var submited = true;

验证像

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

什么是变量

事件

？关键代码

是

enter

，对吗？需要更多上下文。。。如前所述，什么是

事件

，它绑定到什么元素？它是什么事件处理程序？我链接的代码会误导最终意图。我目前正在考虑并打算侦听更改事件，我只是不知道是否应该删除keyup 13的显式侦听器，我真的只是好奇隐式提交如何将讨论提高一个档次……我们不知道所有这些事件处理程序都绑定到什么，也不知道您试图修复什么。在问题中解释更高级别的问题，而不是在所有报告上张贴链接，因为更改处理程序中的提交触发器毫无意义。找不到不会导致双重提交的用例，除非该元素不在其自身的表单中，否则它仍在提交我的表单，即使使用默认设置，请参见。如果默认的隐式提交被阻止了，这不应该提交吗？我已经更新了答案，并包含了一个指向JSFIDLE的链接（比快速测试的要点要好得多），还包含了对第二个问题的答案。

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