Is there masked input plugin for knockout.js using extenders?

Question

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?

Solution 1

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);
    }
};

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.

Solution 2

Well done, riceboyler. I took your code and extended it a little in order to use the "placeholder" property of the Masked Input Plugin:

    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 with placeholder:

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

HTML without placeholder:

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

The KO binding works either way.

Solution 3

Just take the code from the answer in that link and put it in a extender (Written on free hand, can have errors)

ko.extenders.masked = function(observable, options) {
    return ko.computed({
        read: function() {
            return '$' + this.observable().toFixed(2);
        },
        write: function(value) {
            // Strip out unwanted characters, parse as float, then write the raw data back to the underlying observable
            value = parseFloat(value.replace( /[^\.\d]/g , ""));
            observable(isNaN(value) ? 0 : value); // Write to underlying storage
        }
    });
};

edit: You probably want to supply the mask as a options instead of having it hardcoded to USD etc

update: If you want to use the mask plugin from riceboyler's answer but with extenders you can do

ko.extenders.mask = function(observable, mask) {
    observable.mask = mask;
    return observable;
}


var orgValueInit = ko.bindingHandlers.value.init;
ko.bindingHandlers.value.init = function(element, valueAccessor) {
    var mask = valueAccessor().mask;
    if(mask) {
        $(element).mask(mask);
    }

    orgValueInit.apply(this, arguments);
}

http://jsfiddle.net/rTK6G/

Solution 4

I tried to use the first answer but it did not work with ko.validation plug in. My validation errors were not being displayed.

I wanted to have little bit more intuitive ko binder. Here is my solution. I am using jquery.inputmask plug in. I also wipe out the property on my viewmodel if not value entered.

    ko.bindingHandlers.mask = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel,     bindingContext) {
            var mask = valueAccessor() || {};
            $(element).inputmask({ "mask": mask, 'autoUnmask': false });
            ko.utils.registerEventHandler(element, 'focusout', function () {
                var value = $(element).inputmask('unmaskedvalue');            
                if (!value) {
                    viewModel[$(element).attr("id")]("");                
                }
            });
        }
    };

Here is the usage:

<input type="text" data-bind="value: FEIN, mask: '99-9999999'" id="FEIN" >

View more solutions

Comments

[Rup]

An anonymous user comments that the registerEventHandler should be on the blur event not focusout.

[David Robbins]

+1 - Great answer - I just added this to my project and it works like a charm.

[Mike Cole]

If you initialize data from the view model, it does not show the input mask until you click into the input. For example, it would show 999999999 for the SSN instead of 999-99-9999.

[Biki]

Your first solution is really great. It helped me to achieve masking functionalty with out using masking plugin :) Thx a lot :)

[Mark B]

I'm getting an error with var observable = valueAccessor() which is actually just the string value of my mask. Any suggestions?

[jfw]

This is a great solution! I am encountering an issue that I can't seem to find a solution to, however. If I use the code riceboyler contributed, and I use an optional section in my mask ('99999?-9999'), the literal and placeholders appear for the optional section when the page loads. (data is '90210', control reads '90210-____'). If I enter and leave the control, the mask behaves as expected. To fix this, I added $(element).trigger('blur'); to the end of the update method.

[blazkovicz]

thanks for a clever thought about value updating on focusout / blur event. My masked input suddenly did not update value observable.

[blazkovicz]

@MarkB you should use valueAccesssor() for mask and allBindingsAccessor().value or allBindingsAccessor().textInput for observable, also update method in example is redundant and also updates element with wrong value.

[Jibran]

How did you decided to bind to the 'blur' event vs 'focusout'? It fixed an annoying issue for me where non-required blank fields were being marked as not valid (using KO Validation). For example, a blank non-required phone number's value sometimes would be (___) ___-____ using focusout (and therefore not valid). For blur it was always blank. Anyways, thank you.

[aruno]

This plug currently has a lousy interface at least in the current version of Chrome. If you tab into a field it is fine, but if you click in the middle of an empty field the caret ends up in the middle of the masked field and typing just becomes a mess. Even in the demo on the plugin's own page fails.

[Jason Clark]

Yeah, it probably hasn't been updated in 2 or 3 years. I believe the original engineer has moved on to new libraries.