Máscaras com jQuery
Hoje veremos como criar máscaras em formulários utilizando jQuery.
Primeiramente iremos importar as bibliotecas necessárias:
<script src="jquery.js" type="text/javascript"></script><br /><script src="maskedinput.js" type="text/javascript"></script>Obs: Aqui estamos importando as bibliotecas do mesmo
diretório. Caso a sua esteja em um local diferente, faça suas correções.
Agora, iremos criar as máscaras que serão atribuídas a um campo. Primeiramente dizemos qual campo irá receber a máscara e depois
passamos a máscara como mostro abaixo:
jQuery(function($){ <br /> $("#telefone").mask("(999) 9999-9999"); //Aqui montamos a máscara que queremos<br /> $("#cep").mask("99999-999"); <br /> $("#cpf").mask("999.999.999/99"); <br /> $("#cpfcnpj").mask("99.999.999/9999-99"); <br /> });Notem que em $(“#nome_do_campo”) dizemos qual o campo que irá receber a máscara, em mask(“mascara”) montamos a máscara que queremos e onde irão os caracteres colocamos um “9” simbolizando.
Agora iremos criar os campos:
Telefone:
<input type="text" name="telefone" id="telefone">
CEP:
<input type="text" name="cep" id="cep">CPF:
<input type="text" name="cpf" id="cpf">
CNPJ:
<input type="text" name="cnpj" id="cnpj">Agora, como de costume, iremos juntar todas as informações.
<html><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><br /> <title>Mascara com jQuery</title><br /> <script src="jquery.js" type="text/javascript"></script><br /> <script src="maskedinput.js" type="text/javascript"></script><br /> <script><br /> jQuery(function($){<br /> $("#telefone").mask("(999) 9999-9999"); //Aqui montamos a máscara que queremos<br /> $("#cep").mask("99999-999");<br /> $("#cpf").mask("999.999.999/99");<br /> $("#cpfcnpj").mask("99.999.999/9999-99");<br /> });<br /> </script><br /> </head><br /> <body><br /> <input type="text" name="telefone" id="telefone"><br /> <input type="text" name="cep" id="cep"><br /> <input type="text" name="cpf" id="cpf"><br /> <input type="text" name="cnpj" id="cnpj"><br /> </body><br /> </html>Bem prático, não? Bom proveito!
já atuou em várias empresa de desenvolvimento de softwares para internet e atualmente é proprietário da Info-One, empresa atuante no mercado de site de publicitários, e-commerce, intranets, vitrines virtuais e extranets. Confeciona video aulas de como desenvolver um site desde a instalação dos programas até a implantação do site em um servidor (www.e-container.com.br). Trabalha com diversas linguagens (Php, Java, Ruby on Rails e Flex). Mantém o site www.fernandobecker.com.br
