是否有使用扩展程序的knockout.js的蒙面输入插件？ [英] Is there masked input plugin for knockout.js using extenders?

问题描述

我见过这个帖子 - 它显示了一种可能的解决方案。但是我希望有一种更优雅的方式来做掩码输入。

I've seen this post - it shows one possible solution. But I would like to have a more elegant way of doing masked input.

它也应该与淘汰验证插件很好地配合（或者可以扩展它）。

It should also play nicely with knockout validation plugin (or maybe extending it).

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

Anyone know how is there similar project out there?

推荐答案

如果你想要在Knockout中使用优秀的 Masked Input Plugin ，编写基本的自定义绑定而不是扩展程序非常容易。

If you wanted to use the excellent Masked Input Plugin in Knockout, it's pretty easy to write a basic custom binding rather than an extender.

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中：

And then in your HTML:

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

依旧使用各种面具。这样，您只需将面罩放在数据绑定中，就可以获得很大的灵活性。

And so on with various masks. This way, you can just put the mask right in your databinding, and it allows a ton of flexibility.

这篇关于是否有使用扩展程序的knockout.js的蒙面输入插件？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！