Keyup 13事件重复暗示提交-提交表单上的进入问题

keyup 13 event repeats implied submission - submit form on enter issue

本文关键字：提交 问题 表单 事件 暗示 Keyup      更新时间：2023-09-26

UPDATE 10/9/15
我最初的问题在下面，不清楚，并没有完全描述我的问题，因为它关注的是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>

如果你在输入框中输入一些内容并按回车键，那么你将在控制台上看到表单提交了两次，一次来自更改事件，一次来自浏览器的隐式提交。

我想停止表单提交两次(你会注意到我已经在上面的代码中尝试了preventDefault)。答案似乎是在输入键的keypress(而不是keyup)上专门设置preventDefault(非常感谢@JotaBe)


原始问题我有一个事件监听器用于输入回车键比如

$(element)
.on('keyup', function (e) {
    if (e.which === 13) { 
        event.trigger(); 
    }
}); `

具体代码来自这个插件

这干扰了隐含提交，这是大多数浏览器的标准，按照W3标准，并导致表单提交两次。

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

对于额外的点，哪个版本(或者我在哪里可以找到哪个版本)"隐式提交"被添加到各种浏览器?(所以我知道我的代码将兼容多远)

先问第二个问题

隐式提交，虽然没有这个名字，但至少从1995年11月的HTML 2规范开始就存在了。第8.2节的最后几行:

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

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

然后是最主要的

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

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

在jquery的情况下，你必须调用event.preventDefault()来避免执行默认操作。

请看下面两件事:

1)默认情况下，当您在表单上按enter键时，表单将被提交。更准确地说，它必须模拟表单的第一个提交按钮的点击。因此，如果这个按钮被禁用，或者不存在，什么也不会发生。

2)如果你想防止默认行为，你必须处理文本框上的keypress(不是keydown或keyup)事件，并调用事件的preventDefault方法。

3)根据规范，这应该只发生在有一个文本框(类型为文本，数字，日期，url，电子邮件等)。但在大多数浏览器中都不能这样工作，例如在桌面版本的Chrome 45、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>

添加全局变量like

var submited = true;

验证等

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

相关文章：