Está desenvolvendo um site ou aplicação web que trabalha com formulários de contato ou de cadastro e quer colocar campos personalizados utilizando máscaras? Se sua resposta for “SIM”, então chega mais porque esse é o tema do post de hoje.
É importante termos dados padrozinados em nosso banco, pois assim o processo de recuperação das informações é menos trabalhoso, sem falar em questões estéticas.
As máscaras auxiliam nessa padronização de alguns campos no formulário, pois cria uma regra pré-estabelecida e só aceita que o usuário insira informações que respeitem essa regra.
Por exemplo: utilizando máscara podemos definir que o campo CPF só poderá aceitar caracteres numéricos e ainda terá por padrão o caracter ponto(.) na 4ª e 8ª posições e um traço(-) na 12ª posição. Assim conseguimos garantir que todos os CPFs serão no estilo 111.111.111-11
CPF é um exemplo, mas máscaras ainda podem ser usadas para CNPJ, datas, CEP, etc.
Certo. Mas como utilizar essas “máscaras”?
Para tornar esse processo um tanto complexo de construção de máscaras em algo relativamente simples, utilizaremos o framework jquery com o complemento jquery.maskedinput
Links para baixar os arquivos: jquery.js e jquery.maskedinput.js
No exemplo a seguir eu crio três máscaras, uma para CPF, uma para Data e uma para CEP.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Usando máscaras com jquery</title> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="jquery.maskedinput.js"></script> </head> <script type="text/javascript"> $(document).ready(function(){ $("input.data").mask("99/99/9999"); $("input.cpf").mask("999.999.999-99"); $("input.cep").mask("99.999-999"); }); </script> <body> <h1>Usando máscaras com jquery</h1> <label for="data">Data:</label><br> <input type="text" class="data" id="data" name="data" /><br><br> <label for="cpf">CPF:</label><br> <input type="text" class="cpf" id="cpf" name="cpf" /><br><br> <label for="cep">CEP:</label><br> <input type="text" class="cep" id="cep" name="cep" /><br><br> <p align="center"><a href="http://www.rafaelwendel.com">www.rafaelwendel.com</a></p> <p align="center">Twitter: <a href="http://www.twitter.com/rafaelwendel">@rafaelwendel</a></p> </body> </html> |
No documento HTML eu importo os dois arquivos javascript, crio logo depois da tag HEAD as regras para cada um dos campos e depois apenas os informo na propriedade “class” de cada componente input do formulário.
E pronto. Quando o campo de texto receber o foco ele automaticamente já irá colocar a máscara.
Para baixar esse exemplo, CLIQUE AQUI
Para visualizar a página com esse exemplo, CLIQUE AQUI
Abs
Siga-me no twitter: @rafaelwendel
Muito Obrigado pela aula !
Sem dúvidas me ajudou muito !
Mas uma vez, obrigado !
Olá Helton, que bom que pude ajudar. E espero que viste o blog mais vezes.
Abs
Olá Rafael
Preciso de um ajuda sua para fazer uma máscara.
É o seguinte: Tenho um campo com a seguinte máscara:
xxxxxxxxx/xx.x.xxxxx
É portanto constituida por 4 partes:
1ª parte = 9 caracteres
2ª parte = 2 caracteres
3ª parte = 1 caractere
4ª parte = 5 caracteres
Mas o problema que tenho é que nem sempre o valor digitado preenche totalmente a máscara, exemplos:
1234/AS.3.FD67
1876453/G.T.12345
12/34.5.AST4
Como crio este tipo de máscara?
Se eu digitasse: 1234.AS.3.FD67
ficava: 1234/AS.3.FD67
O ‘ponto’ servia para passar para a próxima parte da máscara!
Abraço
Rafael, gostei e deu certo, porém eu uso o “class” para formação. Neste caso, como faço para fazer funcionar a mascara? é possível no onkepress?
Muito obrigado pela ajuda.
Edson
Rafael,
Existe outro jeito de colocar a mascara sem usar o class? acontece que eu uso o class para alguns enventos no input type. Agradeço a atenção.
Obrigado,
Edson
Olá Edson, você pode usar o “id” do elemento
Abs
Rafael,
Primeiro muito obrigado pela ajuta, mas també uso o id para alguns enventos. Estou tentando algumas adapitações no onkeypress. Caso tiver alguma alternativa, ficarei muito grato.
Abraços,
Edson
cara, nao estou entendendo qual problema você está tendo. Você pode usar as formatações sem problema.
se for o caso, utilize mais de uma classe dentro do mesmo elemento.
Ex: input type=”text” class=”suaClasse maskTel”
abs
Rafel,
Não vou te encher muito nao. É que estou desenvolento um sistema filantropico…
Acontece que eu useo o “class” e ou “id” para por exemplo, mudar a cor quanto clicar a ssim vai… Se eu usar o class ou o id para as mask, entao perde os efeitos que coloquei… existe alguma maneira de coloar duas classe? como seria?
<input type="text" class="format"….
Muitíssimo obrigado.
Edson
Rafael,
Desculpe, agora entendi. Muito obrigado, valeu mesmo.
Abs,
Edson
Rafael, coloquei as máscaras no meu formulário, mas parece que os campos estão sendo gravados no banco de dados juntos com as máscaras, então ta dando erro porque o cpf é int no meu bd. Como faço pra não gravar junto com as máscaras?
Olá Bruno,
Realmente os caracteres das máscaras são adicionadas ao valor do campo e posteriormente são inseridas no banco de dados.
E vai uma dica: na minha opinião o mais correto é utilizar CHAR ou VARCHAR para campo de CPF porque existem inúmeros cpfs que começam com o 0(zero) e isso pode ocasionar insconsistência em um campo do tipo INT.
Abs!
Olá Rafael,
Quando eu clido no botão salvar, a tela ativa fecha e volta para tela principal, tipo home. Como eu faço para manter aberta a tela que está sendo usada (meu sistema é em php?
Desculpe por fazer pertunta fora do topico do forum, é que nao encontrei um topo ideal.
Obrigado,
Edson
Olá Rafael, ótimo post, está sendo de grande ajuda, mas o problema é o seguinte, estou tentando criar uma máscara para placa de carro, no caso, XXX-9999, mas ele não permite letras, somente números. É isso mesmo, ou eu estou fazendo algo errado?
Ok Rafael, me achei depois de algumas pesquisas. Existem algumas pré-definições:
a – Representa caracteres alfa (letras) (A-Z,a-z)
9 – Representa caracteres numéricos (números) (0-9)
* – Representa caracteres alfanuméricos (letras e números) (A-Z,a-z,0-9)
Valeu…
Olá Junior,
Obrigado pela contribuição. Antes mesmo de eu ver seu comentário você já tinha achado a solução.
Valeu
Abs!
Rafael, sua máscara está funcionando perfeitamente no meu formulário, entretanto quando vou inserir no banco os dados do cliente, ele insere o dado faltando alguns caracteres.Estou usando o banco MySql com PHP, teria alguma forma de retirar a máscara antes de inserir o dado no banco??
Muito Bom, me ajudou muito!! rodou perfeitamente!
Gostei muito dos exemplos.
Cara, muito boa a matéria, valeu mesmo me ajudou pra caramba.
Olá, sua dica foi muito util, porém queria que ao enviar o formulario, apenas os caracteres numericos fossem enviados, queria a máscara fosse vista somente pelo usuario e quando clicasse para enviar ignorasse as barras. tem como?
Este código realmente simplifica muito, porém estou esbarrando em um pequeno detalhes, quando necessário inserir a máscara em mais de um campo semelhante, ela não funciona..
Exemplo: Estou desenvolvendo um aplicação onde o usuário pode registrar vários números de telefone, porém a máscara em qualquer variante ‘class, id (igual ou diferente), só funciona no primeiro campos, os campos seguintes não contam com o recurso.
Há alguma forma de inserir a máscara em todos?
Obrigado!
Marcelo, também enfrentei esse problema, pois queria continuar usando o jquery que já estava na página, no caso, eu tava usando o jquery-1.7.js ai substitui pelo que vai junto do pacote e funcionou tudo normal.. vê se esse não é o seu problema tb..
Muito Obrigado Por essas Mascaras me quebrou um galho enorme te amo desde já (:
Onde eu colo os plugins jquery.js e jquery.maskedinput.js no eclipse?
Olá, sabe me dizer pq não esta funcionando no IE 10?
Obrigado
tb queria saber
Grande Rafael!
O post é antigo mas a solução serviu como uma luva para o meu problema, mas mesmo assim ficaram dúvidas…
Tenho um formulário com 3 campos: Nome, Telefone e E-mail. Todos os INPUTs tem um valor inicial para orientar o usuário no preenchimento. No caso do fone (único campo a ser validado) temos “(DDD) + Telefone”.
Tenho um JS que quando ‘onFocus’, ele limpa o campo. quando ‘onBlur’, caso o usuário não tenha preenchido nada, volta o VALUE original.
Apliquei o seu código e ele está aplicando a máscara direitinho. Mas o input #fone vem em branco quando carrego o HTML. Sabe me dizer porque? O que eu preciso fazer para manter a máscara, mas apresentar esse value inicial no input?
Obrigado desde já pela ajuda!
Olá Sartori,
Já tentou utilizar a propriedade “placeHolder” do HTML? http://www.w3schools.com/tags/att_input_placeholder.asp
Serve para colocar valores padrões nos campos e desaparecem no ganho do foco e voltam caso o valor nao seja preenchido.
Dê uma olhada e veja se resolve o seu problema.
Abs!
Rafael,
Muito obrigado pela ajuda. Esse post ajudou bastante.
Agora, tenho uma dúvida: quando vou colocar a mascara no meu formulário e tenho dois campos de data, a formatação só acontece no primeiro campo, o segundo fica sem nada. Sabe porque?
Já tentei colocar por id, por class, já coloquei class diferentes, já procurei no meu código para ver se tinha algum nome repetido de id ou class, mas nada, continua não formatando o segundo campo de data.
Olá Jefferson,
Erro estranho, geralmente você informa pela class e todos os campos dessa classe já serão afetados. Esse exemplo está online? Se sim, me passe o link para eu ver o que pode estar acontecendo.
Abs!
Oi Rafael, muito obrigado pela dica, ajuda bastante.
Agora, uma pequena dúvida:
Imagine um campo para celular, deve ter a mascara (99)9999-9999
Porém, com a inclusão do 9º dígito em alguns estados, a máscara precisaria ser alterada para (99)99999-9999, mas não é o caso para todos os usuários.
Então, tem como fazer uma máscara que o número de caracteres no primeiro grupo do telefone seja variável?
Valeu, abraço!
Muito obrigado.
Cara, de todos que eu já pesquisei, esse foi o mais simples de todos, valeu! Só preciso saber como faço pra que a tecla backspace tenha efeito?
corrigindo, não funciona no Firefox.
Mais uma e última dúvida (rsrsrs): e quanto aos valores monetários?
Dimes,
Dê uma olhada nesse post: http://www.rafaelwendel.com/2012/07/mascara-para-campos-monetarios-com-jquery-maskmoney/
Abs!
Como que faço com os arquivos js? salvei seus codigos, coloquei tudo na area de trabalho e nem assim, funcionou.
Paulo,
Todos os arquivos abordados no post devem estar no mesmo diretório/pasta.
Abs!
não precisa não. apenas tem que linkar o caminho certo da pasta
Máscara genérica para campos numéricos em JavaScript: http://goo.gl/otlbMl
Cara copiei seu código e nunca funcionou, ai teve uma prova e deixei de ganhar dois pontos devido a essa mascara, ai cheguei em casa e falei, vou aprender essa porra, baixei seu código, analisei com calma e consegui finalmente colocar mascara, muito fácio, agora não perco mais ponto nisso. VALEU MANO, AJUDOU MUIIIITOOOO MESMO OBRIGOADO
Olá Renato, que bom que pude ajudar!
Abs!
Olá Rafael.
Baixei seu exemplo e funcionou perfeitamente.
Porém quando vou colocar na minha aplicação, não funciona.
Aparece este erro no console:
“fornecedor:22 Uncaught TypeError: $(…).mask is not a function”
Eu já verifiquei e a aplicação está enxergando os arquivos js.
Não entendo o porque deste erro ocorrer!
Se puder me dar uma luz ficaria muito agradecido.
Obrigado, Rafael. Estava com dificuldade aqui na empresa. Funcionou perfeitamente.
Bom dia.
Cara, vê se pode me ajudar.
Vamos supor que eu use o mesmo campo para cpf e cnpj, como eu faria para validar a sua função. Já fiz vários testes e não consegui.
Att. Daniela
Ai sim me ajudou! Vlw!
Obrigado por compartilhar esse conteúdo Rafael. Ajudou muito. Obrigado, sucessos.
valeu Rafael, muito top seu conteúdo