Máscara JavaScript para Campos de Telefone/Celular e CEP [Javascript]

Máscara JavaScript para Campos de Telefone/Celular e CEP

Publicado por Mauro Marssola (última atualização em 09/11/2012)

[ Hits: 84.040 ]

Homepage: vantageti.com.br

Download form.html

5 0

Denuncie Favoritos Indicar

Formato dos campos telefone/celular e CEP utilizando máscara em JavaScript.

Esconder código-fonte

<html>
 <head>
 <title>Mascara JavaScript</title>
 </head>
 <script language="JavaScript">
 /*
 A função Mascara tera como valores no argumento os dados inseridos no input (ou no evento onkeypress)
 onkeypress="mascara(this, '## ####-####')"
 onkeypress = chama uma função quando uma tecla é pressionada, no exemplo acima, chama a função mascara e define os valores do argumento na função
 O primeiro valor é o this, é o Apontador/Indicador da Mascara, o '## ####-####' é o modelo / formato da mascara
 no exemplo acima o # indica os números, e o - (hifen) o caracter que será inserido entre os números, ou seja, no exemplo acima o telefone ficara assim: 11-4000-3562
 para o celular de são paulo o modelo deverá ser assim: '## #####-####' [11 98563-1254]
 para o RG '##.###.###.# [40.123.456.7]
 para o CPF '###.###.###.##' [789.456.123.10]
 Ou seja esta mascara tem como objetivo inserir o hifen ou espaço automáticamente quando o usuário inserir o número do celular, cpf, rg, etc 

 lembrando que o hifen ou qualquer outro caracter é contado tambem, como: 11-4561-6543 temos 10 números e 2 hifens, por isso o valor de maxlength será 12
 <input type="text" name="telefone" onkeypress="mascara(this, '## ####-####')" maxlength="12">
 neste código não é possivel inserir () ou [], apenas . (ponto), - (hifén) ou espaço
 */

 function mascara(t, mask){
 var i = t.value.length;
 var saida = mask.substring(1,0);
 var texto = mask.substring(i)
 if (texto.substring(0,1) != saida){
 t.value += texto.substring(0,1);
 }
 }
 </script>
 <body>
 <form name="cadatro">
 <table width="500px" align="center">
 <tr>
 <td width="100px">
 <b>CEP.:</b>
 </td>
 <td>
 <input type="text" name="cep" onkeypress="mascara(this, '#####-###')" maxlength="9">
 </td>
 </tr>
 <tr>
 <td>
 <b>Tel Resid.:</b>
 </td>
 <td>
 <input type="text" name="telefone" onkeypress="mascara(this, '## ####-####')" maxlength="12">
 </td>
 </tr>
 <tr>
 <td>
 <b>Tel Celular.:</b>
 </td>
 <td>
 <input type="text" name="celular" onkeypress="mascara(this, '## #####-####')" maxlength="13">
 </td>
 </tr>
 <tr>
 <td colspan="2">
 <input type="submit" value="Enviar">
 <input type="reset" value="Limpar">
 </td>
 </tr>
 </table>
 </form>
 </body>
 </html>

Scripts recomendados

Função Javascript simples para validação de CPFs

Checar campos de um formulário

Simples Form

Inverter palavras ou links em JavaScript

Validador de Data em JavaScrip com Expressão Regular

Comentários

[1] Comentário enviado por paulakfleck em 01/10/2013 - 09:50h

Parabéns, código simples e preciso. Funcionou perfeitamente, obrigada!

0 0

[2] Comentário enviado por marssolinha em 01/10/2013 - 10:55h

Qualquer duvida relacionado a desenvolvimento JavaScript e PHP é só entrar em contato

2 0

[3] Comentário enviado por Sfielks em 11/08/2016 - 22:16h

Olá, estava testando o código e, aparentemente, ele não permite que o usuário apague sem selecionar (usando direto o backspace). Sou iniciante, então você teria alguma dica do que poderia ser feito?

8 0

[4] Comentário enviado por brenororiz em 02/01/2018 - 18:15h

Olá, acabei de testar e código funciona muito bem, só que a mascara não funciona quando abro o formulário pelo celular.
Alguma solução?

0 0