(12) 3629-5513ligue ou solicite um Orçamento Online

Utilizando Máscara com jQuery

Home / Dicas e Tutoriais / Utilizando Máscara com jQuery

Utilizando Máscara com jQuery

Autor
Categoria Dicas e Tutoriais

Máscaras têm uma função muito interessante para programação. Por exemplo, se no formulário de preenchimento de dados onde um usuário esta fazendo um cadastro online, você não quer que no lugar de CEP ele digite letras, o mesmo vale para telefone etc.

Então criamos para esse campos as máscaras com a ajuda do jQuery. Elas irão impedir que o usuário digite algum caractere não estipulado por você. Caso você decida que um campo só poderá ter letras, o usuário não pode colocar um número, e vice versa.

Para tal, utilizaremos o plugin Masked Input (download do arquivo no final do tutorial).

Ao criarmos o formulário, precisamos definir as propriedades dos campos para saber que tipo de valor ele vai aceitar.

Para isso vamos dividir aqui o código em duas partes, porém isso é para mera didática. Na primeira parte do código, vamos chamar o jQuery e o plugin Masked Input. Vamos também indicar quais são os campos do formulário e suas respectivas máscaras:

Considerando a linha $(“input.data”).mask(“99/99/9999”):

Isso significa que os dados neste campo (input com a classe “data”, como indicado entre aspas) vão seguir uma ordem aparecendo no formato de data, ou seja, dias, meses e anos.

Neste exemplo usamos apenas números, porém temos ainda outros parâmetros que podemos usar com:

a – Representa qualquer letra (A-Z,a-z)
9 – Representa qualquer número (0-9)
* – Representa qualquer caractere alfanumérico (A-Z,a-z,0-9)

A segunda parte de nosso código, nós temos o formulário com os campos que iremos colocar os dados(inputs).

Nesta parte oque fizemos foi criar os campos de Data de CPF e de CEP, para que eles buscassem no começo da página para que cada input tivesse as regras para seguir.

O código completo de nossa página ficou assim:

Confira uma exemplo funcionando.

Arquivos utilizados neste tutorial:

jQuery v1.7.1

Plugin Masked Input

Receba Novidades Exclusivas


YESbr
YESbr
YESbr
Outras Publicações
Contato

Deixe sua mensagem.

Gerar Novo Código captcha txt

Digite o termo desejado...