在动态值上使用 jQuery Mask 插件答案

【问题标题】：Using jQuery Mask Plugin on dynamic value在动态值上使用 jQuery Mask 插件
【发布时间】：2019-07-28 19:40:16
【问题描述】：

我正在尝试在输入上使用jQuery-Mask-Plugin，该值可以是动态的。此输入可以是至少 2 位到最多 8 位的任何数字，并且掩码是“-”。例如我可以有'2-2'、'45-8'或'9999999-8'等。

问题是面具根本不起作用。我设法使用$("#input-area input").mask("00-0"); 使它工作，但那样，我的面具不是动态的。

这就是我想要做的：

var options = {
    onKeyPress: function (conta, ev, el, op) {
        var masks = ['0-0', '00-0', '000-0', '0000-0', '00000-0', '000000-0', '0000000-0', '0000000-0'];
        if(conta.length == 2){
            var mask = masks[0];
        } else if(conta.length == 3){
            var mask = masks[1];
        } else if(conta.length == 4){
            var mask = masks[2];
        } else if(conta.length == 5){
            var mask = masks[3];
        } else if(conta.length == 6){
            var mask = masks[4];
        } else if(conta.length == 7){
            var mask = masks[5];
        } else if(conta.length == 8){
            var mask = masks[7];
        }
        $('#input-area input').mask(mask, options);
    }
}
if($('#input-area > div > input').length == 2){
          $('#input-area > div > input').mask('0-0', options);
} else if($('#input-area > div > input').length == 3){
        $('#input-area > div > input').mask('00-0', options);
} else if($('#input-area > div > input').length == 4){
        $('#input-area > div > input').mask('000-0', options);
} else if($('#input-area > div > input').length == 5){
        $('#input-area > div > input').mask('0000-0', options);
} else if($('#input-area > div > input').length == 6){
        $('#input-area > div > input').mask('00000-0', options);
} else if($('#input-area > div > input').length == 7){
        $('#input-area > div > input').mask('000000-0', options);
} else if($('#input-area > div > input').length == 8){
        $('#input-area > div > input').mask('0000000-0', options);
}

【问题讨论】：

标签： javascript jquery input dynamic mask

【解决方案1】：

这里有一些问题

首先，最明显的是您正在启动 mask 在 DOM 中加载输入之前。先加载input 然后 mask
您缺少代码：加载动态输入的event 在哪里？
您正在将onKeyPress 加载到选项中？

您可能希望这样构建您的 jquery

HTML

无论您的keypress 是如何生成的（click 事件），都应使其传递长度值。基本上，预先在按钮中动态加载您的data-id。在我的例子中，它是2

<button class="loadinput" data-id="2">Click</button>

<div id="input-area"><div></div></div>

JQUERY

然后在jquery中先加载输入，再加载mask

$(document).on('click', '.loadinput', function() {
    var this_length = $(this).attr('data-id');
    $('#input-area > div').html('<input id="thisinput" type="text">');
    if (this_length == 2) {
        $('#thisinput').mask('0-0');
    } else if (this_length == 3) {
        $('#thisinput').mask('00-0')
    }...and so on
})

【讨论】：

【解决方案2】：

在Jquery Mask Plugin 的文档中进一步搜索我发现了递归数字。类似于：$('#input-area > div > input').mask('##0-0', {reverse: true});

【讨论】：