是否有使用扩展器的 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?

推荐答案

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

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屋！