21

I want to mask the text in an input box without changing the actual value. I can not use any plugins.

I am currently doing this - but as you can see the issue is that the actual value is changed on submit. How can I just change the display value?

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

3 Answers3

30

You need two inputs

Two inputs should get the job done. One input will contain the masked text and the other will be a hidden input that contains the real data. 

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

The way I approached the masking is to build a function for both masking and unmasking the content so everything stays uniform. 

$("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

DominicValenciana
  • 1,681
  • 2
  • 16
  • 25
  • `string.replace(/(\d{2})(\d{3})(\d{2})/,"$1-$2-$3");` could you explain how this works exactly? Thanks – Arthur Oct 02 '20 at 20:09
  • 2
    Definitely! This runs the `string` through a regex operation! In regex, `( )` are placed around "capture groups". We'll talk more about that in a moment but first, let me tell you that `\d` means "digit" and `\d{2}` means "two digits". Finally, `$` followed by a number refers to a capture group, which one indicated by which number. So, as you've perhaps concluded, that code takes the first string of 7 digits it finds and splits it into the first two, then the middle three, then the last two (with `-` between). To learn more, check out https://regexr.com and their Cheatsheet in the left menu! – Benjamin C Oct 20 '20 at 13:21
3

or also

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

with

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
    }
}
Giacomo
  • 94
  • 6
2

A more robost version of accepted answer without having two input's which may pollute transmitted form fields and also being aware of key-repetitions and other quirks when pressing a key too long:

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

and

$("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

coyer
  • 4,122
  • 3
  • 28
  • 35