Máscara de CEP com jQuery

Há muito tempo o jQuery vem facilitando a vida dos programadores web. Implementar uma máscara de CEP é extremamente simples e rápido utilizando esta tecnologia, algo que no passado era uma chatice de se fazer.

Você vai precisar importar os dois scripts a seguir em seu código HTML. Salve-os em seu computador clicando sobre eles com o botão direito do mouse.

- jquery-1.2.6.pack.js
- jquery.maskedinput-1.1.4.pack.js

Adicione as linhas de importação dos dois javascripts imediatamente antes de fechar a tag head de sua página, como ilustrado abaixo:

<title>Título da sua Página</title>
...
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jquery.maskedinput-1.1.4.pack.js"/></script>

Após as linha de importação, inicialize a máscara com jQuery da seguinte forma:

<script type="text/javascript">
$(document).ready(function(){
	$("#cep").mask("99.999-999");
});
</script>

Nota: Se você quiser utilizar o formato 99999-999 basta remover o "." da máscara.

Crie agora seu form e utilize o atributo id='cep' no textfield que corresponde ao campo de CEP:

<form name="formulario" action="" method="get">
<input name="cep" id="cep" type="text"/>
</form>

A máscara de CEP está pronta! Tente pressionar no campo de exemplo abaixo letras, ponto, hífen ou outros caracteres diferente de números. Repare que o script impede a digitação destes caracteres sem que você digite nem mais uma linha de código.

Vale ressaltar ainda que caso o usuário interrompa a digitação e pule para o próximo campo sem o preenchimento dos oito números necessários, o script automaticamente limpa o valor preenchido assumindo uma condição de erro.

Exemplo - Teste a máscara em funcionamento:

Veja a máscara de CEP aplicada e funcionando na página buscar endereço por cep aqui do site.
Divulgue este Artigo!


Contorno inferior da janela de baixo

Copyright - 2012-2016 - Gerador de CEP - Uma ferramenta para gerar CEP's Válidos