没有插件的Javascript输入文本屏蔽

我想在不更改实际值的情况下屏蔽输入框中的文本.我不能使用任何插件.

我目前正在执行此操作-但您可以看到问题是提交时实际值已更改.如何更改显示值？

$("input[name='number']").focusout(function(){
    var number = this.value.replace(/(\d{2})(\d{3})(\d{2})/,"$1-$2-$3");
    this.value = number;
}

解决方法:

您需要两个输入

两个输入即可完成工作.一个输入将包含被遮罩的文本,另一个输入将是包含实际数据的隐藏输入.

<input type="text" name="masknumber">
<input type="text" name="number" style="display:none;">

我采用掩蔽的方式是构建用于掩蔽和反掩盖内容的函数,以便所有内容保持统一.

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

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

function destroyMask(string){
    return string.replace(/\D/g,'').substring(0,8);
}

Working JSFiddle

标签：masking,javascript,jquery,input
来源： https://codeday.me/bug/20191010/1888488.html