mascara input html com javascript

Asked

Viewed 1,049 times

0

good night. I have this field with mask when typing Cpf, it happens that if copy/paste it does not apply the mask, only the numbers.

how can I have the 2 forms of mask in 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

  • Have you tried with onpaste or oninput?

  • as well, in input or java?

  • 1

    In the HTML element: onpaste="formatar('###.###.###-##', this)" oninput="formatar('###.###.###-##', this)"

  • copy/paste did not work...

  • You have tried Maskedinput: https://plugins.jquery.com/maskedinput/

2 answers

1

see if it works (I took advantage of the friend’s 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: https://jsfiddle.net/qz19ou7g/1/

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 goes through the exclusion of any digit that is not a number and test whether it returns 11 characters, which supposes that a valid Cpf was inserted but without the expected formatting.

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.