mascara input html with javascript

Question

mascara input html with javascript

Navigation

#1 by (1 votes)
#2 by (0 votes)

0

Good evening. I have this field with a mask when typing cpf, it happens that if you copy / paste it does not apply the mask, only the numbers.

How can I have the 2 mask forms in the imput?

function formatar(mascara, documento){
  var i = documento.value.length;
  var saida = mascara.substring(0,1);
  var texto = mascara.substring(i)

  if (texto.substring(0,1) != saida){
            documento.value += texto.substring(0,1);
  }

}

o input:
<input type="text" name="ao_cpf" id="ao_cpf" placeholder="CPF" maxlength="14" OnKeyPress="formatar('###.###.###-##', this)" />

javascript html

asked by anonymous 07.07.2017 / 23:29

2 answers

An Activity for each action or several actions in the same Activity? Subtraction with decimals in result

score 1 · Answer 1

The code is commented and easy to understand

function ValidaCPF(){   

var ao_cpf=document.getElementById("ao_cpf").value ; 
var cpfValido = /^(([0-9]{3}.[0-9]{3}.[0-9]{3}-[0-9]{2}))$/; 

    if (cpfValido.test(ao_cpf) == false)    { 
 
	    ao_cpf = ao_cpf.replace( /\D/g , ""); //Remove tudo o que não é dígito
	    
	    if (ao_cpf.length==11){
		    ao_cpf = ao_cpf.replace( /(\d{3})(\d)/ , "$1.$2"); //Coloca um ponto entre o terceiro e o quarto dígitos
		    ao_cpf = ao_cpf.replace( /(\d{3})(\d)/ , "$1.$2"); //Coloca um ponto entre o terceiro e o quarto dígitos
		    //de novo (para o segundo bloco de números)
		    ao_cpf = ao_cpf.replace( /(\d{3})(\d{1,2})$/ , "$1-$2"); //Coloca um hífen entre o terceiro e o quarto dígitos
		    
		    var valorValido = document.getElementById("ao_cpf").value = ao_cpf;
	    }else{
	    	alert("CPF invalido");
	    }
	
    }
}

<input type="text" name="ao_cpf" id="ao_cpf" placeholder="CPF" maxlength="14" OnBlur="ValidaCPF();"/>

The X of the question involves the exclusion of any digit other than number and test if it returns 11 characters, which assumes that a valid cpf has been entered but without the expected formatting.

score 0 · Answer 2

see if it works (I took advantage of the friend code above):

JavaScript:

function formatar(mascara, documento){
  var i = documento.value.length;
    if(i < 14){
      var saida = mascara.substring(0,1);
      var texto = mascara.substring(i);
      if (texto.substring(0,1) != saida){
            documento.value += texto.substring(0,1);
      }

      if(i >= 11){
          var ao_cpf=document.getElementById("ao_cpf").value;
              ao_cpf = ao_cpf.replace( /\D/g , "");
            ao_cpf = ao_cpf.replace( /(\d{3})(\d)/ , "$1.$2"); //Coloca um ponto entre o terceiro e o quarto dígitos
            ao_cpf = ao_cpf.replace( /(\d{3})(\d)/ , "$1.$2"); //Coloca um ponto entre o terceiro e o quarto dígitos
            //de novo (para o segundo bloco de números)
            ao_cpf = ao_cpf.replace( /(\d{3})(\d{1,2})$/ , "$1-$2"); //Coloca um hífen entre o terceiro e o quarto dígitos
            var valorValido = document.getElementById("ao_cpf").value = ao_cpf;
      }
    }

}

Input:

<input type="text" name="ao_cpf" id="ao_cpf" placeholder="CPF" maxlength="14" onMouseOut="formatar('###.###.###-##', this)" onKeyUp="formatar('###.###.###-##', this)" />

Fiddle: link