Uma dúvida na hora de criar um sistema de cadastro, é como criar uma máscara para quando o usuário insirir o CPF, CNPJ, CEP ou data, seja formatado em tempo real. Neste tutorial mostrarei como desenvolver em JavaScript uma máscara para CPF.
Então vamos lá! Primeiramente crie uma página html (ex: “teste.html”) e preencha com os seguintes códigos:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pt-BR"> <head> <title>Teste mascara javascript CPF</title> <script src="mascaraCPF.js" type="text/javascript"></script> </head> <body> <form> <p> <label>CPF:</label> <input type="text" name="cpf" maxlength="14" onkeyup="formataCPF(this, event)" /> </p> </form> </body> </html> |
Neste código HTML, vemos a linha “<script src=”mascaraCPF.js” type=”text/javascript”></script>” responsável por importar o arquivo “mascaraCPF.js” que irá modelar o campo CPF.
Também vemos a linha “<input type=”text” name=”cpf” maxlength=”14″ onkeyup=”FormataCPF(this, event)” />” que nada mais é do que o campo que será inserido o CPF, limitado a 14 caracteres (11 números, mais 2 pontos e hífen).
Atenção para a função “onkeyup=”FormataCPF(this, event)”, o objetivo dela é fazer com que seja automaticamente invocado a funçao “FormataCPF(this, event)” na entrada de algum digito, enviando assim o dígito inserido e o valor decimal dele. Essa função se encontra no arquivo “mascaraCPF.js”.
Agora vamos a segunda parte: Crie um arquivo com nome “mascaraCPF.js” na mesma pasta do “teste.html” e adicione o seguinte código:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 | function formataCPF(campo, key){ //Pego a tecla pressionada var tecla = key.keyCode ? key.keyCode : key.which ? key.which : key.charCode; var cpf = campo.value; //Removo tudo que nao seja numero var patt1 = /[0-9]/g; cpf = cpf.match(patt1); var tamanho = 0; if(cpf!= null){ //Transformo o array em string var n_cpf = ""; for(var i=0; i<=(cpf.length-1); i++){ n_cpf += cpf[i]; } cpf = n_cpf; //Pego a quantidade de numeros ja inseridos tamanho = cpf.length; }else{ campo.value = ""; } if(tamanho <= 3){ campo.value = cpf; } //Adiciono pontos e traco no CPF if(tecla != 8 && tamanho >=3 && tecla != 36 && tecla != 37 && tecla != 39 && tecla != 127){ if (tamanho < 6){ campo.value = cpf.substr(0, 3) + '.' + cpf.substr(3, tamanho-3); } if (tamanho >= 6 && tamanho < 9){ campo.value = cpf.substr(0, 3) + '.' + cpf.substr(3, 3) + '.' + cpf.substr(6, tamanho-6); } if (tamanho >= 9){ campo.value = cpf.substr(0, 3) + '.' + cpf.substr(3, 3) + '.' + cpf.substr(6, 3) + '-' + cpf.substr(9, tamanho-9); } } } |
Agora abra o “teste.html” no seu browser (não foi testado no chrome) e veja o funcionamento.
Testado no IpodTouch e funcionando com keycode 127 no backspace.
Simples e protegido, ao entrar com um digito, é armazenado na variavel “tecla” o código do digito, e é armazenado na variavel “cpf” o digito. Logo depois é removido todos caracteres que não sejam números, e concatenado os itens do array transformando-os em uma única String. Utilizando a quantidade de caracteres já inserido, executo condições para formatar o campo do CPF.
boaaaa
Comment por felipe — 8 de novembro de 2009 » 2:01
Really good work about this website was done. Keep trying more – thanks!
Comment por Yahoouj — 22 de fevereiro de 2010 » 22:39