Máscaras em campos de formulários com jQuery
Postado por: Anderson Custódio de Oliveira emPara criar máscaras com jQuery, iremos usar o plugin Masked Input, com apenas uma linha de código podemos criar qualquer tipo de máscara.
Para começar, caso não tenha o jQuery, faça o download do mesmo, após isso pegue o Masked Input, e apenas inclua-los em sua página.
Agora vamos criar as máscaras que precisamos.
jQuery.noConflict();
(function($) {
$(function() {
$('.mask-data').mask('99/99/9999'); //data
$('.mask-hora').mask('99:99'); //hora
$('.mask-fone').mask('(999) 999-9999'); //telefone
$('.mask-rg').mask('99.999.999-9'); //RG
$('.mask-ag').mask('9999-9'); //Agência
$('.mask-ag').mask('9.999-9'); //Conta
});
})(jQuery);
Repare que estou setando as máscaras para “classes”, no site do autor é usado “ids”, mas isso não é muito legal, caso tenha dois campos de telefone numa mesma página, teriamos que mecher no javascript, pois não pode haver “id” repetidos na mesma página.
Agora pra implemetar as máscaras é só incluir as classes setadas nos inputs dos formulários.
<input type="text" name="fone1" class="mask-fone" /> <input type="text" name="fone2" class="mask-fone" /> <input type="text" name="rg" class="mask-rg" /> <input type="text" name="cpf" class="mask-fpc" />
E pronto, já esta funcionando, repare que caso você erre, é possível alterar sem ter que apagar tudo, geralmente algumas máscaras, como a do Banco do Brasil, não deixa editar pelo meio do campo, temos que apagar e digitar tudo de novo, se não tudo que for digitado vai para o final do campo.
Para facilitar, recomendo colocar o código que gera as máscaras no final do código do plugin, sim no mesmo arquivo, assim você não precisa ficar refazendo, e é só incluir e usar.
Sobre Anderson Custódio de Oliveira
=)
Interessante e claro o texto, Anderson! []s
Meu sonho é achar uma boa assim para moeda, tem alguma dica?
Tenta usar o priceFormat, jah atende bem aqui no sistema em que utilizo moeda em Reais (R$).
exemplo:
$(‘input.moeda’).priceFormat({ prefix: ”, centsSeparator: ‘,’, thousandsSeparator: ‘.’, centslimit: 2 });
Espero que ajude…
*centsLimit
Só uma correção!
@Kivanio
Pois é, pra moeda assim ta dificil, este plugin existe a tempos e nunca foi add esta feature.
Hum, eu não tinha pensando nesta máscara, dei uma leve olhada no código e parece que não é possivel fazer este tipo de máscara, mas vou fazer alguma solução para isto, modificar este script, ou fazer um separado, aguardem uns dias que posto uma solução para isto.
Até mais =D
Muito boaa as mascaras! Porem, nao consegui fazer funcionar se elas estiver em uma página que será carregada via AJAX. Alguem tem alguma solução ?! Abraços
Só um detalhe: Agora vamos criar as máscaras que precizamos.
é
Agora vamos criar as máscaras que precisamos.
Ótimo post, vou testar num formulário simples em asp pra variar =D
@Wellington,
Não fui eu quem escrevi o post, mas só agora me atentei a esse erro. Valeu.
Muit bom Tutorial, show de bola
Obrigado por compartilhar conhecimento!
legal isso. onde coloco as máscaras criadas?? no arquivo do form??? isso não fiou muito claro. obrigado!!
nossa inscrivel isso… Jquery facilia muito a vida.. parabens pelo post..
Muito boa dica caiu como uma luva aqui no meu projeto vlw mesmo ^_^
Como eu coloco um limite (MaxLength) utilizando essa mascara?
Ótimo o post sobre mascara. O JQUERY veio para facilitar a vida dos programadores tornando mais rapido o desenvolvimento deixando as aplicacoes mais robustas e atraentes tambem. Parabens pelo post. Continue assim.
pessoal to com um dilema como eu faço isso tipo tenho um form assim onde vc coloca o celular com 55dddnúmero mas queria esconder esse 55 ou seprar em outro textfield uma dica ai?
Se vc for utilizar somente 55 é fácil. Na hora de fazer a inserção no db vc adicionar o 55 na frente da variável do campo. Ou definir como se fosse uma constante tb resolveria.
Olá pessoal,
Acabei pesquisando e achei uma máscara para moedas…
Também é uma solução jQuery.
maskInputMoney – http://inovaideia.com.br/maskInputMoney/
https://github.com/plentz/jquery-maskmoney é a nova url do plugin :)
Só tem um problema nesse maskedinput… temos aqui no Brasil dois tipos de formatação para RG, com um ou dois algorítimos no final. Sendo assim impossível cadastrar um RG com final xx sendo que programei ’99.999.999-9′ no jQuery
Alguem consegue usar o mask sem que ele apague o value pré-definido no campo do formulario?
Sim. O MaskedInput faz isso, pego os valores do banco de dados gero o formulário e quando o jQuery vai substituir com as máscaras ele não apaga nenhum valor, nem mesmo quando vou clicar no campo com a máscara e com o valor já colocado.
Novamente segue o MaskedInput (tem o link no topo do post também): http://digitalbush.com/projects/masked-input-plugin/
o RG está errado porque tem RG que não tem numeros no final é letra ou número.
Usando o $(‘RG’).mask(’99.999.999-x’) o x dizem que é tanto letra como número mas eu testei e não funciona, esqueceram de fazer isso no jquerymask e está dando muita dor de cabeça aqui.
Pessoal descobri o que era.
No RG o campo filnal é “*” assim $(‘RG’).mask(’99.999.999-*’) o * sim serve tanto para letra quanto para número o outro site que li também estava errado é o * e não o x.