【问题标题】:jQuery maskedinput triggers completed twice on pastejQuery maskedinput 触发器在粘贴时完成了两次
【发布时间】:2015-04-29 14:12:51
【问题描述】:

我正面临 jQuery maskedinput 的这个错误。

在屏蔽输入上粘贴值会触发完成事件两次。 这种行为可以在他们的官方网站上看到。

打开this 链接并点击Demo。 选择Product Key 输入并键入aa-999-a999。 之后,尝试在字段中粘贴相同的值。

还有一些与粘贴时不触发事件相关的其他问题,但它们都没有帮助我解决这个错误......

有没有人知道为什么或遇到过类似的问题?

提前致谢。

【问题讨论】:

  • 只是快速浏览了一下,但看起来blurEvent 触发了checkVal,并且#product 有唯一一个带有completed 事件的mask 调用,它打开了alert。这通常是双重罪魁祸首。尝试将completed:function(){alert("Now you typed: "+this.val());} 添加到另一个处理程序?
  • 嘿@ruffin,感谢您的帮助。没错,blurEvent 会触发 checkVal,这可能是个问题。当您说“将完成的功能添加到另一个处理程序”时,您是什么意思?

标签: javascript jquery maskedinput


【解决方案1】:

所以我尝试了这样一个最简单的情况(使用this 表示maskedinput.js,但请注意我在下面编辑它,this 表示jquery-1.11.2.js):

<html>
<body>
    <script type="text/javascript" src="./jquery-1.11.2.js"></script>
    <script type="text/javascript" src="./jquery.maskedinput.js"></script>

    <script type="text/javascript">
    jQuery(function($) {
          $.mask.definitions['~']='[+-]';
          $("#tin").mask("99-9999999",{completed:function(){alert("Now you typed: "+this.val());}});
       });
    </script>

    <table border="0">
    <tbody>
        <tr>
            <td>Tax ID</td>
            <td><input type="text" tabindex="5" id="tin"></td>
            <td>99-9999999</td>
        </tr>
    </tbody>
    </table>
</body>
</html>

我对 maskedinput 源进行了一些编辑,以查看东西何时以及从何处触发。 I'll paste.ee it here,但这里是主要部分...

  • 查找.on("blur.mask")...
  • 请注意,它对blurkeydowninputpaste 重复使用相同的函数。
  • 添加console.log 以告诉您每次调试粘贴时触发的特定事件。

这是我所做的(请注意,如果您使用的是 IE8-,则需要“保护”console.log 调用或在打开开发工具的情况下运行它):

}).on("blur.mask", blurEvent).on("keydown.mask", keydownEvent).on("keypress.mask", keypressEvent).on("input.mask", function() {
    console.log("mask called: " + arguments[0].type); // <<< New debugging line.
    input.prop("readonly") || setTimeout(function() {
        var pos = checkVal(!0);
        input.caret(pos);
        tryFireCompleted("mask");
    }, 0);
}), chrome && android && input.off("input.mask").on("input.mask", androidInputEvent),

当您粘贴内容时,会为“相同”操作调用两个事件处理程序。

mask called: paste
mask called: input

它们最终都调用了tryFireCompleted,它触发了我们在上面我们自己的代码行中设置的.completed函数:

$("#tin").mask("99-9999999",{completed:function(){alert("Now you typed: "+this.val());}});

如果您删除 paste.mask 事件处理程序,该问题就会消失。这是关键部分:

.on("input.mask paste.mask",
...更改为...
.on("input.mask",
...所以paste.mask 消失了。 (当然,在发布到生产环境之前,请删除 console.log 行。)

现在这可能完全独立。粘贴正在发射input,因此拥有paste 也可能是矫枉过正。但在将其用作永久修复之前,我会进行更多检查。我确实尝试过用鼠标右键单击粘贴,这个更改很好。不确定paste 何时被解雇而input 不是。

如果存在 一个边缘情况,即调用了 paste 而没有调用 input(或者你真的希望 tryFireCompleted 触发两次),你需要想办法用更复杂的代码抑制第二个tryFireCompleted

但是,如果没有completed 函数,我认为两次触发不会是一个明显的问题,这就解释了为什么这可能会被忽略。很好的发现。

【讨论】:

  • 更清晰是不可能的!我正在使用 console.log 的东西进行调试,但方式不同。我会按照您的建议进行更改,现在应该足够了。我会在周末尝试寻找新的东西......非常感谢,伙计!标记为已接受!干杯!
  • 好交易。很高兴它有帮助!
猜你喜欢
  • 1970-01-01
  • 2011-07-30
  • 2015-09-29
  • 1970-01-01
  • 2012-01-23
  • 2012-01-17
  • 2011-10-01
  • 1970-01-01
相关资源
最近更新 更多