【问题标题】：Javascript Input Text Masking without Plugin没有插件的 Javascript 输入文本屏蔽
【发布时间】：2017-03-23 16:12:33
【问题描述】：

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

我目前正在这样做 - 但正如您所见，问题是实际值在提交时发生了更改。我怎样才能改变显示值？

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

【问题讨论】：

<input> 元素没有显示值。输入的值是用户看到的。您想要创建 2 个输入：一个用于实际值，另一个用于显示并可能从用户那里获取输入。
您希望掩码如何格式化内容？
掩码的格式与 00-000-00 上面的函数相同。将破折号添加到 8 个数字
@user1392897 我根据请求的格式为您创建了一个解决方案。

标签： javascript jquery input masking

【解决方案1】：

您需要两个输入

两个输入应该可以完成工作。一个输入将包含掩码文本，另一个将是包含真实数据的隐藏输入。

<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

【讨论】：

string.replace(/(\d{2})(\d{3})(\d{2})/,"$1-$2-$3"); 你能解释一下它是如何工作的吗？谢谢
绝对！这通过正则表达式操作运行string！在正则表达式中，( ) 被放置在“捕获组”周围。我们稍后会详细讨论，但首先，让我告诉你\d 表示“数字”，\d{2} 表示“两位数”。最后，$ 后跟一个数字表示一个捕获组，由哪个数字表示。因此，正如您可能已经得出的结论，该代码采用它找到的第一个 7 位数字字符串并将其拆分为前两位，然后是中间三位，然后是最后两位（- 介于两者之间）。要了解更多信息，请查看regexr.com 及其左侧菜单中的备忘单！

【解决方案2】：

也可以

<input type="text" onkeypress="handleMask(event, 'data: 99/99/9999 99:99 999 ok')" placeholder="data:  ok" size=40>

与

function handleMask(event, mask) {
    with (event) {
        stopPropagation()
        preventDefault()
        if (!charCode) return
        var c = String.fromCharCode(charCode)
        if (c.match(/\D/)) return
        with (target) {
            var val = value.substring(0, selectionStart) + c + value.substr(selectionEnd)
            var pos = selectionStart + 1
        }
    }
    var nan = count(val, /\D/, pos) // nan va calcolato prima di eliminare i separatori
    val = val.replace(/\D/g,'')

    var mask = mask.match(/^(\D*)(.+9)(\D*)$/)
    if (!mask) return // meglio exception?
    if (val.length > count(mask[2], /9/)) return

    for (var txt='', im=0, iv=0; im<mask[2].length && iv<val.length; im+=1) {
        var c = mask[2].charAt(im)
        txt += c.match(/\D/) ? c : val.charAt(iv++)
    }

    with (event.target) {
        value = mask[1] + txt + mask[3]
        selectionStart = selectionEnd = pos + (pos==1 ? mask[1].length : count(value, /\D/, pos) - nan)
    }

    function count(str, c, e) {
        e = e || str.length
        for (var n=0, i=0; i<e; i+=1) if (str.charAt(i).match(c)) n+=1
        return n
    }
}

【讨论】：