Usando máscaras no formulário HTML com jquery

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

É formado em Sistemas de Informação, pós-graduado em Sistemas de Banco de Dados e mestre em Educação com foco em Tecnologias Sociocomunitárias. Trabalha como professor de ensino técnico e tecnológico no Instituto Federal de Educação, Ciência e Tecnologia de São Paulo ministrando disciplinas nas áreas de programação, banco de dados, desenvolvimento de projetos e engenharia de software.

Posts relacionados

Comentários

  1. 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

  2. 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

  3. 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

    1. 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

  4. 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

  5. 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

  6. 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?

    1. 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!

  7. 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

  8. 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?

  9. 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…

  10. 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??

  11. 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?

  12. 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!

    1. 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..

  13. 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!

  14. 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.

  15. 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!

  16. 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?

  17. 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

  18. 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.

  19. 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

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *