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>
<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($){
$("#telefone").mask("(999) 9999-9999"); //Aqui montamos a máscara que queremos
$("#cep").mask("99999-999");
$("#cpf").mask("999.999.999/99");
$("#cpfcnpj").mask("99.999.999/9999-99");
});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>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Mascara com jQuery</title>
<script src="jquery.js" type="text/javascript"></script>
<script src="maskedinput.js" type="text/javascript"></script>
<script>
jQuery(function($){
$("#telefone").mask("(999) 9999-9999"); //Aqui montamos a máscara que queremos
$("#cep").mask("99999-999");
$("#cpf").mask("999.999.999/99");
$("#cpfcnpj").mask("99.999.999/9999-99");
});
</script>
</head>
<body>
<input type="text" name="telefone" id="telefone">
<input type="text" name="cep" id="cep">
<input type="text" name="cpf" id="cpf">
<input type="text" name="cnpj" id="cnpj">
</body>
</html>Bem prático, não? Bom proveito!
De 0 a 10, o quanto você recomendaria este artigo para um amigo?