Após o lançamento da biblioteca jQuery, ganhamos formas mais rápidas e porque não, mais bonitas para exibir o conteúdo de nossas aplicações na tela.
O plugin MeioMask permite que sejam adicionadas máscaras ao conteúdo de tags input que o usuário pré-estabelecer.
Então vamos começar:
Precisaremos da biblioteca jQuery e do plugin MeioMask. Abaixo os links para download:
Download jQuery
Download MeioMask Plugin
Salve em uma determinada pasta e renomeie (opcional) o arquivo da Jquery para “jquery.js” e o plugin MeioMask para “meiomask.js”
Agora criaremos o HTML que vai receber as máscaras:
<script src="jquery.js" type="text/javascript"><!--mce:0--></script>
<script src="meiomask.js" type="text/javascript"><!--mce:1--></script>
<script type="text/javascript"><!--mce:2--></script>
<input alt="decimal" type="text" />Vamos entender melhor as partes do código:
A trecho abaixo permite à página fazer referencia aos arquivos da jQuery e plugin MeioMask. Caso deseje fazer uma melhor organização do código, você poderá separar os scripts em pastas, não muda em nada o resultado final.
<script src="jquery.js" type="text/javascript"><!--mce:3--></script> <script src="meiomask.js" type="text/javascript"><!--mce:4--></script>
A trecho abaixo faz com que o plugin MeioMask vasculhe a página, procurando por inputs que sejam do tipo text:
<script type="text/javascript"><!--mce:5--></script>
Bom, como foi dito na explicação anterior, a pesquisa foi feita por inputs do tipo text, mas atribuímos a ele o tipo de máscara desejada através do atributo alt do input:
<input alt="decimal" type="text" />
Perai! De onde você tirou esse decimal?
Seguinte, por default esse plugin já vem com alguns modelos de máscara padrão, como:
'phone' : { mask : '(99) 9999-9999' }, //Telefone 'phone-us' : { mask : '(999) 9999-9999' }, //Telefone dos USA 'cpf' : { mask : '999.999.999-99' }, //CPF 'cnpj' : { mask : '99.999.999/9999-99' }, //CNPJ 'date' : { mask : '39/19/9999' }, //Data 'date-us' : { mask : '19/39/9999' }, //Data dos USA 'cep' : { mask : '99999-999' }, //CEP 'time' : { mask : '29:69' }, //Hora 'cc' : { mask : '9999 9999 9999 9999' }, //Cartão de Crédito 'integer' : { mask : '999.999.999.999', type : 'reverse' }, //Número inteiro 'decimal' : { mask : '99,999.999.999.999', type : 'reverse', defaultValue: '000' }, //Decimal 'decimal-us' : { mask : '99.999,999,999,999', type : 'reverse', defaultValue: '000' }, //Decimal dos USA 'signed-decimal' : { mask : '99,999.999.999.999', type : 'reverse', defaultValue : '+000' }, //Decimal Positivo 'signed-decimal-us' : { mask : '99,999.999.999.999', type : 'reverse', defaultValue : '+000' } //Decimal dos USA
As máscaras já fazem a validação do campo, os números apresentados informam até quantos números aquele campo vai aceitar e até qual numero cada digito vai, por exemplo:
Na máscara ‘time’ : { mask : ’29:69′ }:
O primeiro digito vai até o número “2″, pois não existe hora que inicia com o número 3.
O segundo digito vai até o numéro “9″.
O terceiro digito é o caractere “:” que divide as horas dos minutos. e assim por diante… Podemos notar nas outras máscaras que os caracteres são colocados de acordo com o tipo de informação que o input irá receber.
Claro que não existe a hora 29:69, mas isto temos que tratar na validação pelo javascript.
Bom, e para finalizar:
Caso queira criar uma nova máscara, você pode fazer da seguinte maneira:
<script type="text/javascript"><!--mce:6--></script>
O script de sua máscara personalizada também deverá ser inserido entre as tags <head></head> de sua página, logo após o script que procura os inputs do tipo text.
A máscara feita acima com o nome de “contabancaria” simplesmente formata os números digitados em um input para o padrão de contas de bancos, que é de 8 números seguidos por um hífen e digito identificador.
Lembrando que para chamar sua máscara personalizada é só atribuir ao alt do input o nome dado a ela.
Para mais especificações, acesse a página do plugin: Meio Mask
Por hoje é só… espero que tenham entendido… qualquer dúvida posta ai! =]
Download do exemplo.
Artigos relacionados...
jQuery, mascara, Máscara de input, MeioMask
Olá… por favor.. como fazer um input aceitar somente a-zA-Z e . e – e _ ??
ou somente alfanumerico mesmo…
grato.
Boa noite…
ao invés de utilizar no atributo alt=”" um dos recursos que passei no post, você pode usar assim:
Ou seja, caso queira que o campo aceite letras de A-Z tanto minusculas quanto maiusculas, você deverá utilizar ‘a’ no atributo alt. Por exemplo:
<input type="text" alt="a" />A única gambiarra que achei do modo nativo de letras é que caso você utilize como no exemplo acima, ele limita a 1 caractere de entrada. Caso você queira por exemplo 10 caracteres, tem que ser assim:
<input type="text" alt="aaaaaaaaaa" />Ou seja, 10 letras ‘a’ no alt…
Espero ter ajudado! =]
Olá, tem como desabilitar a função tab? para que ele não passe para o proximo campo automaticamente?
Como posso fazer pra quando uma mascara desse tipo:
$.mask.masks.matricula = {mask: ’9999999′}
chegar ao fim digitando os 7 numeros eu chame uma função?
Foi um dos melhores post, que eu já vi!
Parabéns!
Script nota 10, valeu!
Show… parabéns!
dê um “CTRL + F” no seu teclado e procure por:
autoTab:
true = Habilita
false = desabilita
estou com um problema que quando estou digitando em um campo e o campo recebe valores diferentes estou precisando aceitar somente número usei o mask mas está dando problema se o campo esta maxlength=”12″ e você digita somente 10 caracter e troca de campo o que estava no campo é apagado. como resolver isso.
obrigado
Parabens, post nota 10
Very good your post !
Gladson essa sua abordagem só serve para input asp:textbox não serve ? e se servir como faria
Parabéns
ótimos post
poxa não estou conseguindo fazer funcionar a mascara no input
sera porque eu estou usando firefox?
não esta formatando nada, fiz as modificações mesmo assim nada
nem o que eu fiz e nem o do download que esta neste post!!!
sebe me dizer o que prescisso fazer pra funcionar!
Valeu a informação!
Boa tarde, gostaria de saber como fazer para que a mascara de meu campo aceite somente letras maiusculas.
Gladson, muito boa sua dica, queria saber se tem como na mascara alfanumerica que ficou muito boa por sinal mas liberar tbm o caracter @, pois eu gostaria de tratar um campo e-mail e nesse caso da certinho, porém preciso permitir os pontos e arroba
tem como fazer isso?
Obrigado, não testei ainda, mas pelo que vi a galera aprovou… Vai me salvar no meu TCC…
Muito bom este plugin, estou usando e recomendo!