在动态值上使用 jQuery Mask 插件

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 插件

Using jQuery Mask Plugin on dynamic value

javascript

jquery

input

mask

dynamic