Palavra:   

Revista PHP / Java Script

Osdeni Sadzinski

Programador Pleno PHP, trabalha atualmente na UNESC (www.unesc.net) como Programador Web. tem conhecimentos em: PHP, AJAX, JavaScript, JSON, XHTML, CSS e MySql. Estudando: Java e Ruby on Rails.

Máscaras para formulários com jQuery e Masked Input

Máscaras para formulários com jQuery e Masked Input

 Como nosso amigo Filipe Boldo sitou em seu artigo  JQuery: Javascript de uma maneira diferente, o jQuery é um Framework fácil de usar e que facilita bastante a codificação do seu JavaScript.

 O Masked Edit é um plugin de mascaras de formulário, que atua sobre o jQuery. Esse plugin  facilita a criação de diversos tipos de máscaras com muita facilidade e produtividade.

 1º Passo: Baixar os arquivos JavaScript do jQuery e do Masked Input.

 2º Passo: Depois de baixá-los vamos codificar.

HTML
  1.  <html>
  2.  <head>
  3. 	<title>Título de seu documento</title>
  4. 	<script src="jquery.js" type="text/javascript"></script>
  5. 	<script src="jquery.maskedinput-1.1.1.js" type="text/javascript"></script>
  6. 	<script type="text/javascript">
  7. 		$(function() {
  8. 			$('input[@name=data]').mask('99/99/9999');
  9. 			$('input[@name=cep]').mask('99999-999');
  10. 			$('input[@name=cpf]').mask('999.999.999-99');
  11. 			$('input[@name=placa_veiculo]').mask('aaa-9999');
  12. 		});
  13. 	</script>
  14.  </head>
  15.  <body>
  16. 	<form action="">
  17. 		Data: <input type="text" size="10" name="data" /> <br />
  18. 		CEP: <input type="text" size="10" name="cep" /> <br />
  19. 		CPF: <input type="text" size="10" name="cpf" /> <br />
  20. 		Placa Veículo: <input type="text" size=”10" name="placa_veiculo" />
  21. 	</form>
  22.  </body>
  23.  </html>
www.revistaphp.com.br

Linha 4 – Carregou o jQuery;

Linha 5 – Carrega o Masked Input

Linha 7 – Diz que quando a página for carregada, irá ser executado o bloco de código contido entre os {}

Linha 8,9,10,11 – Criou as máscaras desejadas.

Para criar outros formatos de máscaras, basta usar a sua criatividade e ler o manual do Masked Input.

Abs

Opções de Interação

  •