Mask input on html does not work

Question

I'm trying to create a mask to my input, but one strange error happens. I have to enter 11 numbers, and my mask have to make it like this: ###.###.###-##. But when I enter the sixth digit my current input become blank. I have no idea what is the problem.

This is my script:

function mascararCpf(){
   var cpf = document.getElementById("idCpf");

   if((cpf.value.length == 3) || (cpf.value.length == 6)){ 
           cpf.value += ".";
       return;
   }

   if(cpf.value.length == 9){
       cpf.value += "-";
       return;
   }
 }

And this is my input:

<label> CPF: <input type="number" autocomplete="on" name="cpf" id="idCpf"   placeholder="Seu CPF"  required onblur="validarCpf()" onkeypress="mascararCpf()"></label>

Answer 1

Try with

<input type="text"  ...

problem with the input type number

DEMO

If you want to open Numeric keypad on focus, I would suggest you to use

<input type="tel"  ...

Another DEMO

Answer 2

That's because you need to count dots . as part of the length. "123.456" is SEVEN characters long.

It is a common practice to put several input fields (in your case 4 fields) and to go from one field to the other when the length of the field (3) has been reached.

Answer 3

As noted before the input type should be text . Furthermore, you should consider that the length of the input value increases after appending a '.' or '-'.

Your html is not valid. The <label> -tag should be closed before opening <input> .

It's better not to use inline handlers . You can assign your hander in the script. Using type="text" the input value can also be non numeric. If you want the mask-method to check that you should add checking of the inputted value. A tentative method could be:

// bind handler to the input field
document.querySelector('#idCpf').onkeypress = mascararCpf;
// the handler method, including a numeric-check for the entered value
function mascararCpf(e){
    var len = String(this.value).length; 
    this.value += len === 3 || len === 7 ? '.' : len === 11 ? '-' : '';
    return isNaN(+String.fromCharCode(e.keyCode)) ? false : true;
}

Here's a jsFiddle demonstrating it all

Answer 4

I had a similar need, so I developed the following code. Not 100% yet, but it works.

function editMask(mask,element,e) {
    if (e.keyCode >= 48 & e.keyCode <= 57 | e.keyCode >= 96 & e.keyCode <= 105 | e.keyCode == 46 | e.keyCode == 8) {
        var v = element.value;
        var N = v.replace(/\D/g,'');
        var L = N.length;
        var r = '';
        var resp = '';
        for (i=0;i<mask.length;i++) {
            if (mask[i] == '_') {
                if (N.length > 0) {
                    r = N[0];
                    N = N.substring(1,N.length);
                } else {
                    r = '_';
                }
            } else {
                r = mask[i];
                if (N.length > 0) {
                    L++;
                }
            }
            resp = resp+r;
        }
        element.value = resp;
        element.setSelectionRange(L,L);
    }
}

It's called in the onkeyup event of the input:

<input type='text' size=20 id='insPFis_CPF' value='$CPF' onkeyup='javascript:editMask(\"___.___.___-__\",this,event)'>

You may want to change the mask format for CNPJ, phone numbers, etc. I hope it helps.