Posts Tagged jQuery

Atendendo a pedidos dos leitores do blog, hoje vou apresentar um outro plugin para jQuery chamado meioMask, ele é um plugin para jQuery utilizado para mascarar campos input.

Com este plugin podemos mascarar campos do tipo: cpf, cnpj, data, moeda, etc… e ainda podemos criar nossas próprias máscaras de input com facilidade.

Atualmente o plugin está na versão 1.1-1 e sua documentação pode ser encontrada aqui .

Opa, vamos ver como funciona!

Primeiramente, para utilizar este plugin você deve incluir a biblioteca do jQuery e do meioMask:

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.meiomask.js" type="text/javascript"></script>

Atenção: Se você for trabalhar com caracteres especiais e o charset da sua página não for “utf-8″, é importante adicionar o atributo charset com valor “utf-8″ na chamada do plugin, assim:

<script src="jquery.meiomask.js" type="text/javascript" charset="utf-8"></script>

Mascarando um campo de telefone e um campo de cep.

Exemplo de código para mascarar telefone e cep.

$(document).ready(function() {
	$('input[name="campo_telefone"]').setMask('phone'); // telefone
	$('input[name="campo_cep"]').setMask('cep'); // cep
});

Mascarando campo de CPF e CNPJ:

Exemplo de código para mascarar cpf e cnpj.

$(document).ready(function() {
	$('input[name="campo_cpf"]').setMask('cpf'); // cpf
	$('input[name="campo_cnpj"]').setMask('cnpj'); // cnpj
});

Mascarando campos de data:

Exemplo de código para mascarar data.

$(document).ready(function() {
	$('input[name="campo_data"]').setMask('date'); // data
});

Mascarando campos com números, como cartão de crédito, números inteiro, moeda, moeda com valor negativo.

Exemplo de código para mascarar números como cartão de crédito, números inteiros, moedas e moeda com valor negativo.

$(document).ready(function() {
	$('input[name="campo_cc"]').setMask('cc'); // cartão de crédito
	$('input[name="campo_numero"]').setMask('integer'); // números inteiros
	$('input[name="campo_money"]').setMask('decimal'); // dinheiro
	$('input[name="campo_money_negativo"]').setMask('signed-decimal'); // dinheiro com valores negativos
});

Não achou a máscara que precisava?

Também podemos criar nossas próprias mascaras, conforme nossa necessidade.

Vamos súpor que temos que cadastrar algumas informações de um veículo e não temos definido no plugin uma máscara para o ano e para a placa do veículo, então o jeito é criar uma.

Agora vamos ver como criar uma máscara com 4 digítos para o ano e uma outra máscara com três letras maiúsculas mais quatro números para formar uma placa de veículo:

Exemplo para criar máscaras para ano e placa de carro.

$(document).ready(function() {
	$('input[name="campo_ano"]').setMask('9999'); // ano do veículo
	$('input[name="campo_placa"]').setMask('ZZZ-9999'); // placa do veículo
});

No exemplo acima criamos as mascaras conforme nossa necessidade, repare que na máscara da placa utilizei ‘ZZZ-9999′, o ‘Z’ indica que quero somente letras maiúsculas e o ‘9′ que quero somente números.

Saíba que você pode adaptar para suas necessidades e para criar suas próprias máscaras tem que conhecer algumas regras do plugin, vou apresentá-las abaixo:

Segue uma tabela com as possibilidades:

Compatibilidade do meioMask

O plugin meioMask foi testado com jQuery 1.2.6 e 1.3.x em todos os principais navegadores:

• Firefox (Win, Mac, Linux);
• IE6, IE7, IE8Beta2 (Win);
• Chrome (Win);
• Safari (Win, Mac, iPhone, sim, ele suporta iPhone!);
• Opera (Win, Mac).

Baixar meioMask 1.1.1

Compare preços de livros jQuery.