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