Máscara JavaScript para Campos de Telefone/Celular e CEP
Publicado por Mauro Marssola (última atualização em 09/11/2012)
[ Hits: 83.602 ]
Homepage: vantageti.com.br
Formato dos campos telefone/celular e CEP utilizando máscara em JavaScript.
<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>
Validador de IP em JavaScrip com Expressão Regular
Uma simples validação de formulário
Limitar o número de caracteres de um campo
Aprenda a Gerenciar Permissões de Arquivos no Linux
Como transformar um áudio em vídeo com efeito de forma de onda (wave form)
Como aprovar Pull Requests em seu repositório Github via linha de comando
Visualizar arquivos em formato markdown (ex.: README.md) pelo terminal
Dando - teoricamente - um gás no Gnome-Shell do Arch Linux
Como instalar o Google Cloud CLI no Ubuntu/Debian
Mantenha seu Sistema Leve e Rápido com a Limpeza do APT!
Procurando vídeos de YouTube pelo terminal e assistindo via mpv (2025)
Alguém já usou o framework Avalonia para desenvolver interfaces de usu... (4)
Ajuda Pra Melhoria do NFTABLES. (8)
Sinto uma leve lentidão ao arrastar, miniminizar e restauras as janela... (2)
Pastas da raiz foram para a área de trabalho [RESOLVIDO] (7)