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

Question

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

我目前正在这样做-但正如你所看到的问题是，实际值在提交时发生了变化。如何更改显示值?

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

Answer 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);
}

<标题>工作JSFiddle

Answer 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
    }
}

Answer 3

一个更机器人版的可接受的答案，没有两个输入，这可能会污染传输的表单字段，也意识到按键重复和其他怪才当按一个键太长:

<input type="text" name="masknumber" data-normalized="">

和

$("input[name='masknumber']").on("input", function(){ // input event!
  let n = destroyMask(this.value);
  this.setAttribute("data-normalized", n); // saved as attribute instead 
  this.value = createMask(n);
})
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, 7); // 7 instead of 8!
}

<标题> JSFiddle