jQuery Mask: Máscaras para campos de formulários

Uma maneira simples e rápida de adicionar máscaras aos campos de um formulário é utilizando um plugin jQuery, este plugin se chama Masked Input Plugin.

Para criar uma máscara, basta você informar um simples comando javascript, tendo apenas as seguintes regras:

• a – Representa um caractere alfabético (A-Z, a-z)
• 9 – Representa um carácter numérico (0-9)
• * – Representa um caractere alfanumérico (A-Z, a-z ,0-9)

Vamos ver alguns exemplos práticos:

Nota: estamos utilizando o seletor jQuery através do atributo ID.

Máscara para um campo Telefone:

1
2
3

// <input type="text" id="telefone" name="telefone">

jQuery("#telefone").mask("(99) 9999-9999");

Máscara para um campo RG:

1
2
3

// <input type="text" id="rg" name="rg">

jQuery("#rg").mask("9.999.999");

Máscara para um campo CPF:

1
2
3

// <input type="text" id="cpf" name="cpf">

jQuery("#cpf").mask("999.999.999-99");

Máscara para um campo Data:

1
2
3

// <input type="text" id="data" name="data">

jQuery("#data").mask("99/99/9999");

Máscara para um campo Hora:

1
2
3

// <input type="text" id="hora" name="hora">

jQuery("#hora").mask("99:99");

Máscara para um campo Cep:

1
2
3

// <input type="text" id="cep" name="cep">

jQuery("#cep").mask("99999-999");