jQuery 动态遮罩

Question

我在我的应用程序中使用了 jQuery 屏蔽插件。

Link这里给出。

https://github.com/digitalBush/jquery.maskedinput

我需要像这样的动态遮罩。

有时候我需要这样使用 000-00-0 0000000-00-0

假设我写 50000 那么它就会变成 50-00-0

假设我写 500000 那么它将变成 500-00-0

所以我的第一部分将包含 1 到 7 个不同的数字。

那么我该怎么做。

我正在使用的简单掩码如下所示。

$("input[name='mask']").mask("9999999-99-9");

解决方案

var my_condition = true;
    $("input[name='mask']").on('click focus', function(){ 
       $("input[name='mask']").unmask();
       my_condition = true;
    });  
    $("input[name='mask']").on('change paste', function() {
        var len = $(this).val().length;
            if(my_condition) {
             switch(len) {
                 case 5:
                     $("input[name='mask']").mask('99-99-9');
                     break;
                 case 6:
                     $("input[name='mask']").mask('999-99-9');
                     break;
                 case 7:
                     $("input[name='mask']").mask('9999-99-9');
                     break;
                 case 8:
                     $("input[name='mask']").mask('99999-99-9');
                     break;
                 case 9:
                     $("input[name='mask']").mask('999999-99-9');
                     break;
                 case 10:
                     $("input[name='mask']").mask('9999999-99-9');
                     break;
                 default:
                      $("input[name='mask']").mask('9999');   
             }
             my_condition = false;
         }
    });

谢谢

Answer 1

我写了一个简单的 JSFiddle 来演示我将如何解决这个问题。

这是我的 JS 代码：

$("#input").change(function(){
 var len = $(this).val().length;


if(len == 4)
    $(this).mask('99-99');
else if (len == 5)
  $(this).mask('999-99');
else if (len == 6)
  $(this).mask('9-99999');
})

$("#input").focus(function(){
 var val = $(this).val().replace("-",""); //remove the dashes from the old masked value
 $(this).mask("9999999999"); //set to maximum length
 $(this).val(val);
})

.mask() 的问题在于它为输入字段设置了最大长度，这意味着如果设置掩码 "99-99"，则不能在输入中写入超过 4 位数字field.My 解决方案是在输入获得焦点时将掩码设置为 "9999999999"，然后在更改值后设置适当的掩码。您必须更改 change()（偶然的双关语）事件以满足您的需要。

实现缺陷：用户在键入时看不到掩码

jQuery 动态遮罩

jQuery Dynamic Masking

jquery

mask

masking