javascript - 如何在文本框中应用 mask

Question

我有一个网格，其中有一个当前接受数字的文本框。但是我想在没有任何插件的情况下使用 javascript 或 jquery 在该文本框中应用屏蔽。我已经搜索过，到处都是他们要求插件的地方。

我试过这个解决方案，但它不起作用我的默认值应该是 00000-00-000

 $("input[name='masknumber']").on("keyup change", function(){
  
  this.value = createMask($("input[name='masknumber']").val());
})

function createMask(string){
return string.replace(/(\d{2})(\d{3})(\d{2})/,"$1-$2-$3");
 }

如有任何帮助，我们将不胜感激。

Answer 1

添加一个隐藏的输入，它将在没有屏蔽的情况下存储原始值。

HTML:

<input type="text" value="0000000000" id="masknumber">
<input type="text" id="numberWithoutMask" style="display:none;" value="0000000000">

JS:

// call function on change
$("#maskNumber").on("keyup change", function () {
    updateValue();
})
// function to update the value with masking
function updateValue() {
    $("#numberWithoutMask").val(destroyMask($("#maskNumber").val()));
    $("#maskNumber").val(createMask($("#numberWithoutMask").val()))
}

function createMask(string) {
    return string.replace(/(\d{5})(\d{2})(\d{3})/, "$1-$2-$3");
}

function destroyMask(string) {
    return string.replace(/\D/g, '').substring(0, 10);
}
updateValue(); // call function to update the default value

如果您要加载默认值，请将值加载到两个输入。