个人中心
gpt4 book ai didi

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

转载 作者：行者123 更新时间：2023-11-29 18:03:42 25 4
gpt4 key购买 nike

2015 年 10 月 9 日更新
我原来的问题在下面，不清楚并且没有完全描述我的问题，因为它实际上是表单的双重提交(一次来自 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)防止默认(非常感谢@JotaBe)

原始问题
所以我有一个事件监听器，用于输入类似这样的输入键

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

具体代码来自this插件

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

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

为了加分，哪个版本(或者我在哪里可以找到哪个版本)“隐式提交”被添加到各种浏览器？ (所以我知道我的代码可以兼容多久)

最佳答案

第二题先

隐式提交，虽然不是那个名字，但至少存在于与 HTML 2 specs 一样古老的东西中1995 年 11 月。第 8.2 节的最后几行:

When there is only one single-line text input field in a form, the user agent should accept Enter in that field as a request to submit the form.

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

然后是主要内容

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

您的代码正在触发事件，而不是取消默认操作。这就是提交发生两次的原因，一次是针对已处理的事件，一次是针对其他触发的事件。

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

请看this fiddle检查两件事:

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

2) 如果您想阻止默认行为，您必须处理文本框上的按键(不是按键按下或按键弹起)事件，并调用该事件的preventDefault 方法。

3) 根据规范，只有在只有一个文本框(文本、数字、日期、网址、电子邮件等类型)时才会发生这种情况。但它在大多数浏览器中并不是这样工作的，例如在 Chrome 45、IE 10 和 FF27 & FF33 的桌面版本中。 我没有测试其他版本。

fiddle 代码:

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

关于javascript - keyup 13 事件重复隐含提交 - 在输入问题时提交表单，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33026415/

25 4 0
文章推荐： javascript - 解析 JSON 时期望对象但得到字符串
文章推荐： java - 从android程序写入本地主机phpmyadmin
文章推荐： javascript - jQuery scrollTop 不适用于 CSS 视差？
文章推荐： mysql - 代表同一 ID 检索数据时遇到错误
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com