terça-feira, 31 de janeiro de 2012

JQuery: Máscaras

É muito fácil deixar seu site ou sistema Web com uma cara profissional. Utilizando a biblioteca JavaScript JQuery vamos criar máscaras para campos de data e cpf por exemplo.

Para isso, é necessário baixar os arquivos .js do jquery:
http://code.jquery.com/jquery-1.7.1.js
http://cloud.github.com/downloads/digitalBush/jquery.maskedinput/jquery.maskedinput-1.3.js

Depois adicione no <head> de sua página o seguinte trecho:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput.js" type="text/javascript"></script>
 
Agora adicione uma outra tag de script para configurar a máscara dentro da função JQuery (lembre-se que toda configuração jquery vai ali dentro):
 
<script> 
jQuery(function($){
   $("#data").mask("99/99/9999");
   $("#tel").mask("(999) 999-9999");
   $("#cep").mask("99.999-999");
   $("#cpf").mask("999.999.999-99");

}); 
</script> 

Agora basta criar um formulário e adicionar os IDs acima às tags input.

Espero que tenha ajudado.
Abraço.