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 valida

Answer 1

You can use this homemade solution, work perfectly for me:

My Binding knockout call masked inspired from the net, i added some managed language and update from different event. Also I use this js library for using basically : https://plugins.jquery.com/maskedinput/

You can see in my binding the term "allBindingsAccessor().mask" this is from the library maskedinput

 ko.bindingHandlers.masked = {
    init: function (element, valueAccessor, allBindingsAccessor) {
        var mask = allBindingsAccessor().mask || {},
        getCaretPosition,
        setCaretPosition;

        // Permet d'obtenir la position du curseur
        getCaretPosition = function getCaretPosition(element) {
            // Initialise la position
            var caretPos = 0, sel;

            // IE 
            if (document.selection) {
                // Donne le focus à l'élément
                element.focus();
                // Afin d'obtenir la position du curseur
                sel = document.selection.createRange();
                // On place le curseur à 0
                sel.moveStart('character', -element.value.length);
                caretPos = sel.text.length;
            }
                // Firefox 
            else if (element.selectionStart || element.selectionStart === '0') {
                caretPos = element.selectionStart;
            }
            return (caretPos);
        };

        // Permet de définir la position du curseur en fonction d'une position donnée
        setCaretPosition = function setCaretPosition(element, pos) {
            var range;
            if (element.setSelectionRange) {
                element.focus();
                element.setSelectionRange(pos, pos);
            }
            else if (element.createTextRange) {
                range = element.createTextRange();
                range.collapse(true);
                range.moveEnd('character', pos);
                range.moveStart('character', pos);
                range.select();
            }
        };

        // Définition du masque inséré dans le champ
        if (configSvc.culture === "fr-FR") {
            // Cas francais
            $(element).mask("99/99/9999", { placeholder: "JJ/MM/AAAA" });
        }
        else {
            // Cas anglophone
            $(element).mask("99/99/9999", { placeholder: "MM/DD/YYYY" });
        }

        // On capte l'événement d'appuie sur une touche 
        ko.utils.registerEventHandler(element, 'keypress', function () {
            var observable = valueAccessor(),
                position;
            // Afin de résoudre le pb de déplacement du curseur a la fin du mask lors de la mise à jour de l'observable knockout
            if ($(element).val().length === 10) {
                // On récupère la dernière position
                position = getCaretPosition(this);
                // On met à jour la valeur de l'obersable (en cas de sauvegarde) 
                observable($(element).val());
                // On force la position du curseur apres mise à jour de l'observable à la derniere position récupéré
                setCaretPosition(this, position);
            }
        });

        // On capte l'événement de perte de focus pour mettre l'obersable à jour
        ko.utils.registerEventHandler(element, 'blur', function () {
            var observable = valueAccessor();
            observable($(element).val());
        });

        // On capte l'événement change pour mettre l'obersable à jour
        ko.utils.registerEventHandler(element, 'change', function () {
            var observable = valueAccessor();
            observable($(element).val());
        });
    },
    update: function (element, valueAccessor) {
        var value = ko.utils.unwrapObservable(valueAccessor());
        $(element).val(value);
    }

};

in my html page, i use this observable "masked" :

Finally in my js :

birthDate is just an observable

this.birthDate = ko.observable();