Você está em: Home > Javascript/AJAX/DHTML > Visualizando artigo

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

Autor/fonte: Osdeni Sadzinski
E-mail/Url: http://www.revistaphp.com.br/artigo.php?id=174
Tags: [ jquery ]

[ Indicar a um amigo ] [ Translate to english ] [ Imprimir ]

O jQuery é um Framework fácil de usar e que facilita bastante a codificação do seu Javascript. O Masked Edit é um plugin de máscaras 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. Vejamos como utilizá-lo para isso:

1. Baixe os arquivos Javascript do jQuery e do Masked Input.

2. Depois de baixá-los vamos codificar:

<html>
<head>
<title>Título de seu documento</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.maskedinput-1.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {
$('input[@name=data]').mask('99/99/9999');
$('input[@name=cep]').mask('99999-999');
$('input[@name=cpf]').mask('999.999.999-99');
$('input[@name=placa_veiculo]').mask('aaa-9999');
});
</script>
</head>
<body>
<form action="">
Data: <input type="text" size="10" name="data" /> <br />
CEP: <input type="text" size="10" name="cep" /> <br />
CPF: <input type="text" size="10" name="cpf" /> <br />
Placa Veículo: <input type="text" size=”10" name="placa_veiculo" />
</form>
</body>
</html>

Explicando:

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.