sexta-feira, 20 de janeiro de 2012

Utilizando Plugin de Máscara de formulários para JQuery - Masked Input

Boa Noite, se você chegou até aqui é porque quer aprender como usar máscara nos seus formulários, segue abaixo a maneira mais simples de você deixar seus formulários mais profissionais e elegantes.






Chame os arquivos .js dentro da TAG 


Exemplo:


<head>
<title> Utilizando Plugin de Máscara de formulários para JQuery - Masked Input </title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput.js"/></script>
</head>


Exemplos: 


(não é obrigatorio usar todos deixe apenas o que vc for usar)
Obs:. coloque dentro da TAG <head> também.


<script>
jQuery(function($){
$("#telefone").mask("99-9999-9999");
$("#cpf").mask("999.999.999-99");
$("#cnpj").mask("99.999.999/9999-99");
$("#cep").mask("99999-999");
$("#data").mask("99/99/9999");
$("#hora").mask("99:99");
});
</script>




Para aplicar a máscara, use as seguintes regras:


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


Agora vamos fazer com que apareça a mascara no input:
Obs:. não importa qual o nome do input e sim o id para que apareça a mascara; no caso o id das mascaras acima são: telefone, cpf, cnpj, etc...


Hora:
<input name="hora" type="text" id="hora">

CPF:
<input name="cpf" type="text" id="cpf">

CNPJ:
<input name="cnpj" type="text" id="cnpj">



Então pessoal é isso, espero que tenha ajudado!




Link dos arquivos .js



Não deixe de seguir nosso blog, pois esse é o 1º de vários outros tutoriais.
Abraços..

Nenhum comentário:

Postar um comentário