Question

我试图在输入上使用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);
}

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

Answer 2

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

在动态值上使用jQuery Mask插件

2 个答案: