Mascaras em campos com javascript
15/01/2010
1 comentário
Hail!
Essa semana me surgiu a necessidade de criar uma mascara para alguns campos do formulário, busquei no google e encontrei – não lembro onde – uma forma muito legal fazer isso. No exemplo eu estou usando o prototype, mas pode ser feito de qualquer outro jeito – com o jquery use o .val() no lugar do .getValue e .setValue -.
Vou passar exemplo de mascara de data, cpf, cep, telefone e cnpj:
A parte do javascript:function mask(element, func) { var value = $('date').getValue(); $('date').setValue( func(value) ); } function msk_date(value) { value = value.replace(/\D/g, ""); value = value.replace(/^(\d{2})(\d)/, "$1/$2"); value = value.replace(/^(\d{2})\/(\d{2})(\d)/, "$1/$2/$3"); return value }Salve esse arquivo ou coloque direto no html:<html> <head> <title></title> <script src="prototype.js"></script> <script> ... </script> </head> <body> <input id="date" onkeyup="mask(this, msk_date)"> </body> </html>
Pronto, agora você pode testar. Eu fiz alguns outros exemplos:
function msk_cnpj(value) {
value = value.replace(/\D/g, "");
value = value.replace(/^(\d{2})(\d)/, "$1.$2");
value = value.replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2.$3");
value = value.replace(/^(\d{2})\.(\d{3})\.(\d{3})(\d)/, "$1.$2.$3/$4");
value = value.replace(/^(\d{2})\.(\d{3})\.(\d{3})\/(\d{4})(\d)/, "$1.$2.$3/$4-$5");
return value
}
function msk_cep(value) {
value = value.replace(/\D/g, "");
value = value.replace(/^(\d{2})(\d)/, "$1.$2");
value = value.replace(/^(\d{2})\.(\d{3})(\d)/, "$1.$2-$3");
return value
}
function msk_telefone(value) {
value = value.replace(/\D/g, "");
value = value.replace(/^(\d{3})(\d)/, "($1) $2");
value = value.replace(/^\((\d{3})\) (\d{4})(\d)/, "($1) $2-$3");
return value
}
function msk_cpf(value) {
value = value.replace(/\D/g, "");
value = value.replace(/^(\d{3})(\d)/, "$1.$2");
value = value.replace(/^(\d{3})\.(\d{3})(\d)/, "$1.$2.$3");
value = value.replace(/^(\d{3})\.(\d{3})\.(\d{3})(\d)/, "$1.$2.$3-$4");
return value
}
Você pode criar suas próprias mascaras, mas para isso terá que aprender expressão regular, clique aqui para saber mais.
CategoriasJavascript
Javascript, mascara, Programação, tutorial, web
