jquery根据值长度更改输入掩码模板

Posted 2023-05-09

【中文标题】jquery根据值长度更改输入掩码模板

【英文标题】：jquery Change input mask template based on value length

【发布时间】：2017-09-23 10:29:27

【问题描述】：

我无法弄清楚如何根据值长度更改输入模板掩码。 例如：我有两个车号模板“99-999-99”和“999-99-999”。我需要根据值长度更改输入掩码。 如果值长度为 7 或更小，则模板必须为“99-999-99”。如果值长度大于 7，则寺庙必须为 '999-99-999'。

我的代码：

$("#carnum").keyup(()=>
  var masks = ['99-999-99', '999-99-999'];
  var value = $('#carnum').val().replace(/-/g, '');
  value.length <= 7 ? -1 :  $('#carnum').mask(masks[1]);
)
$("#carnum").mask('99-999-99');

这里是fiddle。

谢谢！

【参考方案1】：

在再次屏蔽同一元素之前，最好先取消屏蔽， 这是动态或有条件更改掩码的示例代码参考

var changeMask=0;
$("#carnum").keyup(()=>
    var masks = ['99-999-99', '999-99-999'];
  var value = $('#carnum').val().replace(/-/g, '').replace(/_/g,''); 
  if(value.length==7)
  changeMask++;
  
  if(changeMask>1&&value.length>=7) 
  $('#carnum').unmask(masks[0]); 
  $('#carnum').mask(masks[1]);
  var arrayValue=value.split("");
  $("#carnum").val("");
  for(var index=0;index<arrayValue.length;index++)
  $("#carnum").val(function(i, val) 
        return val + arrayValue[index];
    ).trigger('input');
   
  
)
$("#carnum").mask('99-999-99');

Working fiddle here