Home Tutoriais Desenvolvimento JS/HTML – Formato dos campos telefone/celular e CEP utilizando máscara em JavaScript.


Script que faz a formatação dos campos de telefone, celular e CEP

<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>

Fonte: http://www.vivaolinux.com.br/script/Mascara-JavaScript-para-Campos-de-Telefone-Celular-e-CEP

   

Leave a Reply

This blog is kept spam free by WP-SpamFree.