11 de março de 2008

Mask com JQuery

Opa!!! depois de um chá de sumisso estou de volta ;)

Bom fiquei meio afastado do blog porque sofri um acidente de moto, mas agora está tudo no lugar novamente.

Como prometido hoje vou posta aqui para vocês a biblioteca 'mask.js' que eu estava corrigindo e deixando dinamicamente.

Vamos lá!!

Exemplo

Crie um arquivo chamado 'arquivo.html' e cole o seguinte código:

>CODE <<>

<html>
<head>
<title>Mask com JQuery</title>
<script src="jquery-1.1.3.1.min.js" type="text/javascript"></script>
<script src="mask.js" type="text/javascript"></script>
</head>
<body>
<form action="">
<div>
Data:
<input type="text" size="15" id="data" mask='99/99/9999' onchange="maskOut(this.id)"/> <br />
CEP:
<input type="text" size="15" id="cep" mask='999999-999' onchange="maskOut(this.id)"/> <br />
CPF:
<input type="text" size="15" id="cpf" mask='999.999.999-99' onchange="maskOut(this.id)"/> <br />
RG:
<input type="text" size="15" id="rg" mask='999.999.999-xx' onchange="maskOut(this.id)"/> <br />
Placa Veículo:
<input type="text" size="15" id="placa_veiculo" mask='aaa-999' onchange="maskOut(this.id)"/>
</div>
</form>

</body>
</html>

IMPORTANTE
todas as input devem ter OBRIGATÓRIAMENTE os atributos 'id', mask' e 'onchange'
<input type="text" size="15" id="rg" mask='999.999.999-xx' onchange="maskOut(this.id)"/> <br />

Lembrando-se
o valor '9' para identificar que a input é somente número
o valor 'a' para identificar que a input é somente letras
o valor 'x' para identificar que a input é somente letras e números

Exemplos

99/99/999 -> 11/02/1989
aaa-999 -> abc-648
99.999.999-xx -> 44.788.610-t9
xxxx.99.aaa -> e4b8.10.ton



Agora faça o download da biblioteca 'mask.js'

Download da biblioteca mask.js
Arquivo JS (mask.js)
(OBs:. Este código foi produzido por Josh Bush e adaptador por Laion Camargo)

Legalll ;)

Até mais!!

10 comentários:

Anônimo disse...

o CEP NO EXEMPLO ESTÁ COM UM NÚMERO A MAIS NA PARTE MAIOR

Unknown disse...

Olá amigo, estes são apenas modelo de como utilizar a mask em JQuery, esta mudança vc faz dentro do mask='' no input (HTML) mas se precisar dele correto mesmo a mask da um toque que eu modifico pra você!

Até mais ;)

Anônimo disse...

E ae kra tudo bem? olha soh, estava fazendo alguns testes e vi que ele tem alguns problemas com onfocus, onclick e outros meios de pegar a ação...

Unknown disse...

Opa!
na verdade se você utilizar uma input só ele funcionaria normal! o problema é quando se aplica varias mask em varias input's... quando estava motando esta função tive vários problemas com isso, deixar totalmente dinâmico e para todos os estilos, por isso dexei um padrão que seria onChange. Caso você precise pra alguma outra, posta ai que eu faço uma função especifica para você.
Vlws
;)

Fábio Miranda Costa disse...

Pessoal, usem o plugin que eu fiz para jQuery.
Ele tem várias máscaras pré definidas (cpf, cnpj, cartao de credito, data e outros ) além de aceitar máscaras para dinheiro também, tipo ‘3.333,00′.
Aceita colar no campo também!

Além de ser brazuca!

Vejam a página de documentação, já tem vários exemplos.

http://www.meiocodigo.com/projects/meiomask/

Abraço!

Jordani disse...

Não estou conseguindo fazer funcionar. Alguém pode me ajudar?

Unknown disse...

Você pode postar o codigo pra darmos uma verificada.. porque testei aqui e funcionou tudo normal! Ps: a versão do seu JQuery é a mesma que disponibilizei aqui?

lazaro melo disse...

estou tendo um problema com a mascara de campos de somente numero. quando estou digitando no campo ele o campo é dinamico e recebe valores com quantidade de caracter diferentes ele apaga quando troca de input. como resolver isso.

Douglas W. P. disse...

Problema é que nem todos os RG seguem esse padrão, por exemplo o meu RG tem o formato 999.999.9.

E como ele não completa os campos ao clicar fora o input é apagado.

Unknown disse...

De acordo, nesse caso você faz um contador length pra ver quantos caracteres estão vindo e chama a função com 1 caracter a mais se necessário.