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: 83.281 ]

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

Evento OnKeyPress - Usando o Enter

isNumber

Validação para data

Saudação durante o dia

Validador de IP 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