Javascript 接受输入并以相反的方式检查掩码

我需要开发一个javascript函数来反向检查掩码。 这意味着， 如果我设置掩码“#####：##”

• 当我键入“1”时，当我 输入“2”，显示“21”
  当我输入“3”时 它显示“3:21”
  等等

有可能发展成这样吗？？

---

我不知道怎么开始？有人能告诉我正确的方向吗？

更新：

OP想要的是一种将自定义掩码传递给输入并在每次按键时自动掩码的方法——我最初的答案是假设一个硬设置掩码

这不是最终的解决方案，但如果您不想使用插件，应该可以开始： （目前并没有完全按照OP的要求执行）-但很接近

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

---

如果你想要更高级的东西，请仔细看一下这个项目。它已经有了所有不同按键和其他事件的处理程序，更灵活的自定义匹配，以及许多其他需要考虑的事情。

实际上，它不符合我的要求。我试图实现的是检查每个按键（）。现在我可以通过添加前面的键，对照掩码检查，在函数中返回false来实现它。但是，我认为我现在的方式是一种肮脏的方式。我不想在keypress（）中返回false。此外，我已经检查了其他插件，它们对我没有任何用处。谢谢。@Kai您的问题没有提到按键事件。它确实符合你的要求。您的需求可能不是您真正想要的，但这是一个不同的主题。这将通过您为指定需求创建的所有测试。所以我将+1这个答案。是吗？？如果我设置掩码=“#：：#####”，它会起作用吗？我从没想过会有这样一种硬编码的方式。不提及详细要求可能是我的错误。在阅读您的评论后重新阅读问题，它确实有点暗示按键事件。因此，我将链接放在一个库中，用于处理我认为是您的实际问题——定义任何自定义掩码，而不仅仅是在3-5长度的数字中添加冒号。

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