jQuery inputmask 使 CKEditor 适配器停止工作

Question

我有以下表格：

• 发布开始 - 2x inputs，1 个时间，1 个日期；
• Publish End - 2x inputs，1 个时间，1 个日期；
• 发布内容 - 1x textarea。

日期/时间输入使用jQuery InputMask，textarea 使用CKEditor（使用jQuery Adapter，将ckeditor 暴露给$() 和val()）。

使用适配器，我可以：

• 使用$('#idOfTextarea').val() 而不是CKEDITOR.instances['idOfTextarea'].getData();
• 使用$('#idOfTextarea').val('some value') 而不是CKEDITOR.instances['idOfTextarea'].setData('some value');

问题：

• IE (v9) 和 Webkits (Chrome v30 & v31, Safari v5.1)：val() 在我使用 inputmask 绑定输入时停止工作；
• Firefox (v22) 和 Opera (v12.16)：继续工作val()

演示：

这里是小提琴的例子：http://jsfiddle.net/RaphaelDDL/QjVf8/

1. 在 CKEditor 上写一些东西并使用 在控制台上打印 ckeditor .val() 和 在控制台上打印 ckeditor .getData() 来测试它 链接。

2. 点击在上述输入上绑定输入掩码，然后再次点击打印测试。 val() 将停止工作，而 getData （本地 ck 实现） 将继续工作。

我找不到问题是适配器还是输入掩码:(

---

更新：

我发现 ck 适配器和输入掩码都在 $.fn.val 上生成了一个 $.extend。似乎$.fn.val 在适配器停止工作的浏览器上被覆盖，而不是实际扩展（imo，必须同时保持两个扩展，不是吗？）

$.fn.val 在 inputmask (chrome) 之前：

function(d) {
    if (arguments.length) {
        var k = this,
            i = [],
            f = this.each(function() {
                var b = a(this),
                    c = b.data("ckeditorInstance");
                if (b.is("textarea") && c) {
                    var f = new a.Deferred;
                    c.setData(d, function() {
                        f.resolve()
                    });
                    i.push(f.promise());
                    return !0
                }
                return g.call(b, d)
            });
        if (i.length) {
            var b = new a.Deferred;
            a.when.apply(this, i).done(function() {
                b.resolveWith(k)
            });
            return b.promise()
        }
        return f
    }
    var f = a(this).eq(0),
        c = f.data("ckeditorInstance");
    return f.is("textarea") && c ? c.getData() : g.call(f)
}

输入掩码后的$.fn.val (chrome)：

function() {
    var t, i, r;
    return arguments.length == 0 ? (t = n(this), t.data("inputmask") ? t.data("inputmask").autoUnmask ? t.inputmask("unmaskedvalue") : (i = n.inputmask.val.apply(t), i != t.data("inputmask")._buffer.join("") ? i : "") : n.inputmask.val.apply(t)) : (r = arguments, this.each(function() {
        var t = n(this),
            i = n.inputmask.val.apply(t, r);
        return t.data("inputmask") && t.triggerHandler("setvalue.inputmask"), i
    }))
}

在 Firefox 上，$.fn.val 始终相同（当我调用 inputmask 时不会改变）。

有没有办法可以将 inputmask 的扩展与 ckeditor 合并？

Answer 1

对于那些有一天遇到此错误的人，我已经与RobinHerbots（jquery-inputmask 的创建者）进行了交谈，似乎问题是：

n.inputmask.val.apply(t, r); 调用原始的fn.val 代码。 因此 inputmask 在插入到 html 时生成 ref（而不是通过 $(selector).inputmask() 调用时）。它将$.fn.val 缓存到$.inputmask.val 上，但实际上只是在使用.inputmask() 调用时对其进行了扩展。然后 ckeditor 稍后修改 val（稍后调用），但由于 inputmask 已经缓存了 ckeditor 扩展之前的原始 val，它会覆盖 ckeditor 。

---

以这个想法为基础，我测试了将 ckeditor 脚本移动到 inputmask 脚本之前。我对小提琴进行了修订，更改了最后一个 http://jsfiddle.net/RaphaelDDL/QjVf8/8/ 的脚本（请参阅外部资源）。

似乎它现在可以在显示覆盖$.fn.val 的浏览器上工作：dancer：

欲了解更多信息，请查看https://github.com/RobinHerbots/jquery.inputmask/issues/319