Máscara em formulário usando jQuery

Categorias

NEWSLETTER

Receba em seu email atualizações e novidades do HelpMasters.

HelpMasters » jQuery » Máscara em formulário usando jQuery

Máscara em formulário usando jQuery

Olá Pessoal,
Neste meu primeiro artigo vou mostrar a vocês como colocar máscara em campos do seu formulário, usando jQuery, um Framework do JavaScript.

Vamos utilizar o jQuery na página e o arquivo maskedinput.

<head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
 <title>Máscara em jQuery</title>  
 <script type="text/javascript" src="jquery-1.3.2.js"></script>  
 <script type="text/javascript" src="maskedinput-1.1.2.pack.js"></script>  
 
 <script type="text/javascript">  
 $(document).ready(function(){  
 $(function(){  
 $.mask.addPlaceholder("~","[+-]");  
 $("#telefone").mask("(99) 9999-9999");  
 $("#cep").mask("99999-999");  
 $("#data").mask("99/99/9999");  
 $("#cpf").mask("999.999.999-99");  
 $("#cnpj").mask("99.999.999/9999-99");  
 });  
 });  
 </script>

Abaixo vejamos como usar no seu formulário:


</head>  
 <body>  
 <form method="post">  
 Telefone: <input type="text" name="telefone" id="telefone" />  
 <br>  
 CEP: <input type="text" name="cep" id="cep" />  
 <br>  
 <br>  
 Data: <input type="text" name="data" id="data" />  
 <br>  
 <br>  
 CPF: <input type="text" name="cpf" id="cpf" />  
 <br>  
 <br>  
 CNPJ: <input type="text" name="cnpj" id="cnpj" />  
 </form>  
 </body>  
 </html>
<head>  
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
 <title>Máscara em jQuery</title>  
 <script type="text/javascript" src="jquery-1.3.2.js"></script>  
 <script type="text/javascript" src="maskedinput-1.1.2.pack.js"></script>  
 
 <script type="text/javascript">  
 $(document).ready(function(){  
 $(function(){  
 $.mask.addPlaceholder("~","[+-]");  
 $("#telefone").mask("(99) 9999-9999");  
 $("#cep").mask("99999-999");  
 $("#data").mask("99/99/9999");  
 $("#cpf").mask("999.999.999-99");  
 $("#cnpj").mask("99.999.999/9999-99");  
 });  
 });  
 </script>  
 
 </head>  
 <body>  
 <form method="post">  
 Telefone: <input type="text" name="telefone" id="telefone" />  
 <br>  
 CEP: <input type="text" name="cep" id="cep" />  
 <br>  
 <br>  
 Data: <input type="text" name="data" id="data" />  
 <br>  
 <br>  
 CPF: <input type="text" name="cpf" id="cpf" />  
 <br>  
 <br>  
 CNPJ: <input type="text" name="cnpj" id="cnpj" />  
 </form>  
 </body>  
 </html>