Accept the input and check the mask in the reverse way

I need to develop an javascript function to check t开发者_StackOverflow社区he mask reversely. It means, if I set the mask "###:##",

• When I type "1" it shows, "1"

  When I type "2" it shows, "21"

  When I type "3" it shows ,"3:21"

  etc..

Is it possible to develop like that?? I have no idea how to start it? Can anyone put me on the right direction?

Update:

What the OP wants is a way to pass a custom mask to an input and have it auto-mask on every keypress - my original answer was assuming a hardset mask.

This is not a final solution, but should get you started if you don't want to use a plugin: Jsfiddle (does not do what OP requests exactly at the moment) - but gets close.

var masker = {
    mask : '', // custom mask that will be defined by user
    types : {
        '#' : '[\\d]', // number
        'z': '[\\w]', // alpha
        '*': '[\\d\\w]' // number or alpha
    },
    maskMatch : '', // regex used for matching
    maskReplace : '', // replace string
    makeTemplate : function(){
        // basically we want to take the custom mask
        // and make it into a regex match with capture groups
        // and a replace string with the added separator(s)

        // first we need to split the mask into like groups:
        // ex: ###:## -> [#,#,#][:][#,#]
        // so we get the indexes to slice it up later
        var m = masker.mask.split('');
        var len = m.length-1;
        var indexes=[];
        for (var i=0;i<len;i++){
            if(m[i]!=m[i+1]){
                indexes.push(i);
            }
        }
        // now we slice it into groups
        var groups = [];
        for(var i=0;i<=indexes.length;i++){
            var start = (i==0) ? 0 : indexes[i-1]+1;
            var end = (i==indexes.length) ? m.length : indexes[i]+1; 
            groups.push(m.slice(start,end));
        }
        console.log(groups);
        var reg = '';
        var groupCount=1; // replace starts with $1
        var replace = '';
        // loop through to see if its using a wildcard
        // replace with the wildcard and the number to match
        // this will need to be reworked since it assumes
        // {1,n} -- can't change the 1 at this moment
        for(var i=0;i<groups.length;i++){
            var l = groups[i][0];
            if(l!='#'&&l!='z'&&l!='*'){
                replace+= groups[i].join('');
                continue;
            }
            replace+='$'+groupCount;
            groupCount++;
            reg+='(';
            reg+=masker.types[l];
            if(groups[i].length>1){
                reg+='{1,';
                reg+= groups[i].length;
                reg+='}';
            }
            reg+=')';
        }
        console.log(reg);
        console.log(replace);
        masker.maskReplace = replace;
        masker.maskMatch = new RegExp(reg);
    },
    matchIt: function(text)
    {
        // only replace if is match
        if(text.match(masker.maskMatch)){
             text = text.replace(masker.maskMatch,masker.maskReplace);
        }
        return text;
    },
    setup: function(id){
        // you need a way to store the actual numbers (non-masked version)
        // this is quick way, but should be incorporated as a variable
        var hiddenText = $(id).clone().css({'left':'-9999px','position':'absolute'}).prop('id',id.substring(1,id.length)+'hidden').appendTo($(id));


    $('#maskme').bind('keyup',function(e){
        // fix this to better handle numpad, etc
        var c = String.fromCharCode(e.which);
        if(c.match(/[\w\d]/)){
            $(id+'hidden').val( $(id+'hidden').val()+c);
         $(id).val(masker.matchIt($(id+'hidden').val()));
        } else {
            // need a way to tell if user has highlighted then backspace
            // or highlight and space... basically something for highlighting
             if(e.which==8){ // 8 is backspace
               // update our hidden value / stored value with what the user wants
               var old = $(id+'hidden').val();
               $(id+'hidden').val( old.substring(0,old.length-1));
             }
         }                                    
    });
    }
}

Then calling it:

masker.mask = '###:##';
masker.makeTemplate();
masker.setup('#maskme');

If you want something more advanced take a look at the jQuery Masked Input project over a github. It already has handlers for all the different keypresses and other events, a more flexible custom matching, and many other things that should be thought about.