多次执行 Javascript 事件的输入字段答案

【问题标题】：Input field executing Javascript event multiple times多次执行 Javascript 事件的输入字段
【发布时间】：2023-03-14 21:00:02
【问题描述】：

这里是 JavaScript 菜鸟。在我尝试为我的网络应用程序实施的 mfa 输入字段验证方面有点卡住了。

我不想让用户在输入字段中输入 mfa 代码后点击“提交”按钮，而是希望在字段长度达到 6 个字符时简单地触发我的后端服务。我已经在许多网站上看到过这种优雅的做法。

在我的情况下，当我点击该字段时，它会连续 4 次触发 lambdas 函数。我不太明白为什么它会发射 4 次而不是 1 次？

我的假设是因为我试图同时考虑按键、按键、模糊和更改？通过这样做，我试图考虑多种用户行为，例如：丢失字段焦点、字段外的选项卡或“输入”键。

$("#login2fa").inputmask("9 9 9 9 9 9").on("keyup keypress blur change", function() {
    var $el = $(this);

    var code = $el.val().replace(/[^\d]/g, '');
    if (code.length === 6) {
        lambdas.userLoginMfaConfirm(session_token, code, handleConfirmResult);
    }
});

【问题讨论】：

我认为您对多次通话的原因是正确的。也许您可以将事件参数添加到您的回调并注销event.type 以确认：api.jquery.com/event.type
@Camilo 谢谢你的想法！我试着只用 keyup ，这似乎奏效了。这似乎是在按键之前执行的，因此即使用户在输入第 6 个字符后尝试按 Enter 或 Tab，代码也已经在运行。所以我认为这就是我想要的最终结果。进行更多测试以证明这一点！
@Parker，如果你必须使用所有的事件监听器，你也可以初始化一个变量来检查用户登录是否已经被调用。喜欢if (code.length === 6 && !sentLogin)
@a.mola - 这是一个很好的建议，谢谢

标签： javascript jquery keypress keyup content-length

【解决方案1】：

感谢@camillo 的评论，回答我自己的问题！

事实证明，拥有多个 .on 函数会多次运行调用。通过将 on 函数调整为仅包含“keyup”，它按预期工作。

$("#login2fa").inputmask("9 9 9 9 9 9").on("keyup", function() {
    var $el = $(this);

    var code = $el.val().replace(/[^\d]/g, '');
    if (code.length === 6) {
        lambdas.userLoginMfaConfirm(session_token, code, handleConfirmResult);
    }
});

【讨论】：