是否有使用扩展程序的knockout.js的蒙面输入插件？

Question

我看过这篇文章 - 它显示了一个可能的解决方案.但我希望有一种更优雅的方式来做掩码输入.

它也应该与淘汰验证插件(或者可能扩展它)很好地配合.

任何人都知道那里有类似的项目吗？

Answer 1

如果你想在Knockout中使用优秀的Masked Input Plugin,那么编写一个基本的自定义绑定而不是扩展程序非常容易.

ko.bindingHandlers.masked = {
    init: function(element, valueAccessor, allBindingsAccessor) {
        var mask = allBindingsAccessor().mask || {};
        $(element).mask(mask);
        ko.utils.registerEventHandler(element, 'focusout', function() {
            var observable = valueAccessor();
            observable($(element).val());
        });
    }, 
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).val(value);
    }
};

然后在你的HTML中:

<input type="text" data-bind="masked: dateValue, mask: '99/99/9999'" />
<input type="text" data-bind="masked: ssnValue, mask: '999-99-9999'" />

各种面具等等.这样,您只需将面罩放在数据绑定中,就可以获得很大的灵活性.

Answer 2

做得好,米老师.为了使用Masked Input Plugin的"placeholder"属性,我拿了你的代码并扩展了一点:

    ko.bindingHandlers.masked = {
        init: function (element, valueAccessor, allBindingsAccessor) {
            var mask = allBindingsAccessor().mask || {};
            var placeholder = allBindingsAccessor().placeholder;
            if (placeholder) {
                $(element).mask(mask, { placeholder: placeholder });
            } else {
                $(element).mask(mask);
            }
            ko.utils.registerEventHandler(element, "blur", function () {
                var observable = valueAccessor();
                observable($(element).val());
            });
        },
        update: function (element, valueAccessor) {
            var value = ko.utils.unwrapObservable(valueAccessor());
            $(element).val(value);
        }
    };

带占位符的HTML:

    <input id="DOB" type="text" size="12" maxlength="8" data-bind="masked: BirthDate, mask: '99/99/9999', placeholder: 'mm/dd/yyyy', valueUpdate: 'input'"/>

没有占位符的HTML:

    <input id="DOB" type="text" size="12" maxlength="8" data-bind="masked: BirthDate, mask: '99/99/9999', valueUpdate: 'input'"/>

KO绑定以任何一种方式工作.