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>

the problem is related to the type of the input. number won't accept format like 123,45,6-something — BeNdErR
– BeNdErR, Commented Dec 16, 2013 at 11:14
I changed the input type to text and it works, but the problemm is that it is one mobile aplication, Im using phonegap to build my aplication, and using type = text its not good for the user side. I want to use type = number and mask my input. How can I solve it? — Carlos Porta
– Carlos Porta, Commented Dec 16, 2013 at 17:03

Anand Jha · Accepted Answer · 2013-12-17 08:53:41Z

4

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

edited Dec 17, 2013 at 8:53

answered Dec 16, 2013 at 11:13

Anand Jha

10.8k6 gold badges28 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Carlos Porta Over a year ago

Yes, it works, but like I said on the up comment but Im building one mobile aplication and using type as text it is not a good idea for user side. Is there a wayto solve it?

Pierre Arlaud · Accepted Answer · 2013-12-16 11:14:20Z

0

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.

answered Dec 16, 2013 at 11:14

Pierre Arlaud

4,1523 gold badges31 silver badges45 bronze badges

2 Comments

Carlos Porta Over a year ago

Thanks Arlaud, it was inattentive... But using type as number not works, only using text. What I have to do using type as number?

Pierre Arlaud Over a year ago

@Caaarlos well you need to parse the data once it is about to be sent so that only numbers will be kept…

KooiInc · Accepted Answer · 2013-12-16 13:25:13Z

0

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

answered Dec 16, 2013 at 13:25

KooiInc

124k32 gold badges145 silver badges181 bronze badges

1 Comment

Carlos Porta Over a year ago

Thanks Kooilnc, I changed my code and its works, but the problem is that it is one mobile aplication, Im using phonegap to build my aplication, and using type = text its not good for the user side. I want to use type = number and mask my input. Using return isNaN(+String.fromCharCode(e.keyCode)) ? false : true; works but, if I click on . or on space, an space is added to the input, and I dont want it too. (It only happens on mobile).

Rodrigo · Accepted Answer · 2014-02-02 01:05:04Z

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.

Collectives™ on Stack Overflow

Mask input on html does not work

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

2 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related