Hoje iremos ver como colocar mascaras em textfield no html, utilizando o jquery de forma simples.
Para esse tutorial você não irá precisar ter muito conhecimento em JQuery, pois irei disponibilizar dois arquivos ".js" necessários para a criação da mascara.
Todos os arquivos necessários você irá encontrar clicando aqui, inclusive um html pronto.
Com esses arquivos em mãos, você irá criar um seu arquivo HTML contendo o seu formulário com os campos do qual deseja colocar mascara. Para o exemplo irei utilizar um formulário com os campos CPF, CEP e CELULAR.
Nosso aquivo HTML ficará da seguinte forma.
<!DOCTYPE html> <html lang="pt-br"> <head> <title>Mascara com JQuery</title> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.maskedinput.js"></script> <script type="text/javascript" src="js/mask.js"></script> </head> <body> <form> <input type="text" name="cpf"> <input type="text" name="cep"> <input type="text" name="celular"> </form> </body> </html>
Como se pode observar, estamos utilizando a TAG "<script>" no HEAD, ela indica que iremos utilizar comandos JAVASCRIPT, nessa mesma TAG se pode observar que tem o comando "SRC" ele indica onde esta os arquivos de JAVASCRIPT que iremos utilizar, podemos colocar todos os códigos JS na mesma página, porém por questão de tamanho e organização é melhor utilizar arquivos externos.
Estamos linkando com três arquivos JS os dois primeiros arquivos o "jquery.js" e o "jquery.maskedinput.js" são os arquivos necessários que falei que utilizaremos, já o terceiro é o arquivos que vamos apenas criar nossas mascaras. Decide por separado por questão de organização também.
Para criar as mascaras, devem fazer da seguinte forma:
$(document).ready(function(){
$("input#cpf").mask("999.999.999-99");
$("input#cep").mask("99.999-999");
$("input#celular").mask("(99) 99999-9999");
});
Apenas isso deverá conter nesse arquivo. Porém caso queira acrescentar mais alguma mascara é necessário apenas criar outra abaixo da mascara de celular, por exemplo a mascara de DATA.
Ficaria da seguinte forma:
$(document).ready(function(){
$("input#cpf").mask("999.999.999-99");
$("input#cep").mask("99.999-999");
$("input#celular").mask("(99) 99999-9999");
$("input#data).mask("99/99/9999");
});
Você poderá criar essas mascaras como ID ou CLASS, criando apenas como ID você diz que ela é unica, só poderá ser utilizada em um local (aconselho criar como ID, já que mascara é unica), criando como CLASS você diz que poderá ser utilizada em vários outros lugares. Na criação o que difere uma da outra é o "#" e ".", entre o (input e o nome da mascara) tem um simbolo, no caso eu criei como ID então esta da seguinte forma:
$("input#cep")
Para mudar para CLASS, você deverá colocar da seguinte forma:
$("input.cep")
Já que a mascara esta criada agora, devemos apenas chamar ela em nosso formulário para seu respectivo campo.
Para chamar devemos fazer da seguinte forma:
Caso tenha criado para ID: <input type="text" name="cpf" id="cpf"> <input type="text" name="cep" id="cep"> <input type="text" name="celular" id="celular"> Caso tenha criado para CLASS: <input type="text" name="cpf" class="cpf"> <input type="text" name="cep" class="cep"> <input type="text" name="celular" class="celular">
Com isso isso sua mascara esta criada, já pode fazer o teste. Mas uma coisa legal que você pode esta acrescentando é o PLACEHOLDER, ele consiste em em acrescentar uma especie de mascara, mas que só estará visível enquanto o TEXFIELD não esteja com foco, isso serve apenas para dizer qual a forma que o campo deve ser preenchido, uma especie de aviso.
Para acrescentar ele você deverá colocar isso no INPUT:
<input type="text" name="cpf" id="cpf" placeholder="___.___.___-__"> <input type="text" name="cep" id="cep" placeholder="__.___-___"> <input type="text" name="celular" id="celular" placeholder="(__)_____-_____">
E com isso finalizamos nosso tutorial sobre mascara com jquery!
O código completo se encontra clicando aqui.
Sujestões e críticas podem deixar nos comentários.
FONTE: http://www.rafaelwendel.com/2011/07/usando-mascaras-no-formulario-html-com-jquery/
0 comentários:
Postar um comentário