Como aplicar Mascaras utilizando JavaScript
Uma necessidade bastante comum em paginas de cadastro é a inclusão de mascaras em campos de input.
Aqui vou exemplificar uma forma bem simples de incluir umas mascaras para os campos CPF, CNPJ, CEP, Telefone e Data, utilizando apenas JavaScript.
Mas antes de entrarmos nas mascaras, gostaria de chamar a atenção para um ponto em comum que os campos citados acima possuem. Todos eles só podem ser compostos por caracteres numéricos.
A função JavaSript abaixo, quando invocada através do evento onkeypress não irá permitir que caracteres não numéricos :
function apenasNumeros(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
if (unicode != 8 && unicode != 9) {
if (unicode<48||unicode>57) {
return false;
}
}
}
Agora que sabemos como restringir apenas números em nosso input, vamos para as mascaras.
A função JavaSript abaixo, quando invocada através do evento onkeypress nos permitirá inserir uma mascara:
function mascara(src, mask){
var i = src.value.length;
var saida = mask.substring(2,1);
var texto = mask.substring(i);
if (texto.substring(0,1) != saida){
src.value += texto.substring(0,1);
}
}
O parâmetro mask é a mascara desejada. Ex:
· CEP (‘#####-###’)
· CPF (‘###.###.###-##’)
· Telefone(##)####-####')
Agora o momento mais esperado onde vamos utilizar a função
apenasNumes e mascara:
<html>
<head>
<title>Teste JS</title>
<script type="text/javascript">
function apenasNumeros(e) {
var unicode = e.charCode ? e.charCode : e.keyCode;
if (unicode != 8 && unicode != 9) {
if (unicode<48||unicode>57) {
return false;
}
}
}
function mascara(src, mask){
var i = src.value.length;
var saida = mask.substring(2,1);
var texto = mask.substring(i);
if (texto.substring(0,1) != saida){
src.value += texto.substring(0,1);
}
}
</script>
</head>
<body>
<table>
<tr>
<td><label>Apenas números:</label>
</td>
<td><input type="text" name="texto" onkeypress="return apenasNumeros(event)" />
</td>
</tr>
<tr>
<td><label>CEP:</label>
</td>
<td><input type="text" name="cep" maxlength="9" onkeypress="mascara(this, '#####-###'); return apenasNumeros(event)" /></td>
</tr>
<tr>
<td><label>Telefone:</label>
</td>
<td><input type="text" name="telefone" maxlength="13" onkeypress="mascara(this, '(##)####-####');return onlyDigit(event)" /></td>
</tr>
<tr>
<td><label>CPF:</label>
</td>
<td><input type="text" name="cpf" maxlength="14" onkeypress="mascara(this, '###.###.###-##');return apenasNumeros(event)" />
</td>
</tr>
<tr>
<td><label>CNPJ:</label>
</td>
<td><input type="text" name="cnpj" maxlength="18" onkeypress="mascara(this, '##.###.###/####-##');return apenasNumeros(event)" />
</td>
</tr>
<tr>
<td><label>Data:</label>
</td>
<td><input type="text" name="cnpj" maxlength="10" onkeypress="mascara(this, '##/##/####');return apenasNumeros(event)" />(dd/mm/aaaa)
</td>
</tr>
</table>
</body>
</html>
Abraço e bons estudos!
Comentários
Postar um comentário