Máscara de CPF, CNPJ, Telefone, Data para Fomulários


mascara-de-formularios

Para quem quer desenvolver formulários que tenham uma interação melhor com usuário facilitando o seu preenchimento, sugiro a utilização das máscaras de auto preenchimento de pontos, virgula, parenteses e etc.

Para isso podemos utilizar o plugin da JQuery jquery.maskedinput.js e facilmente criamos a máscara.

Vamos lá passo a passo:

Primeiramente vamos fazer o download do plugin. Donwload

1º Inserir o script da Bibilioteca JQuery padrão e o script Maskedinput





2º Insira o script de personalização abaixo dos scripts citados acima

jQuery(function($){
   $("#telefone").mask("(99) 999-9999");
});


Você pode adicionar quantas mascaras quiser basta copiar o script acima mudar a id #telefone por outro nome e mudar (99) 9999-9999 para outros formatos Ex. 999.999.999/99.

3º Insira o nome da ID do script na tag Input do formulário a ser mascarado

Agora é só inserir a id

 


Prontinho seu formulário agora ira atender melhor os usuários bem como facilitará a visualização ao receber o formulário devido a uma padronização escolhida por você.

Segue o link do site oficial do projeto
http://digitalbush.com/projects/masked-input-plugin/





Artigos Relacionados


Designer de Interface pós graduado em Arquitetura da Informação. UI/UX Designer e Front-end Developer, atualmente atendo empresas como freelancer e sou colaborador em uma agência de comunicação onde desenvolvo interfaces criativas com foco na experiência do usuário. Organizador por natureza acredito que o caos é a matéria-prima necessária.

5 comentários em “Máscara de CPF, CNPJ, Telefone, Data para Fomulários

  1. Ricardo 4 de junho de 2014 21:37

    obrigado pelas dicas muito legal!!

  2. Homero 11 de abril de 2013 15:37

    Olá. Provavelmente o problema do Bruno Rafael é o nome do arquivo javascript, que é diferente do exemplo acima, e do arquivo para download.

    No exemplo está jquery.maskedinput.js mas o arquivo para download se chama jquery.maskedinput-1.3.js.

    Levei um tempo para perceber, e quando ajutei o nome funcionou corretamente.

    Um abraço.

    Homero

  3. Bruno Rafael 3 de agosto de 2012 16:49

    Olá amigo, gostaria de aplicar esta máscara no meu formulário, porém não estou conseguindo
    já fiz tudo certo, adicinei o jQuery, adicionei o Maskedinput nos seus devidos lugares, coloquei as id’s dos inputs, tudo certinho, mas não executa no meu formulário.

    código:
    —————————————————————————————————————————————-

    Validação de campos com AJAX

    jQuery(function($){
    $(“#telefone”).mask(“(99) 999-9999″);
    $(“#cpf”).mask(“999.999.999-99″);
    $(“#cep”).mask(“99.999-999″);
    $(“#data”).mask(“99/99/9999″);

    });

    Validação de campos com AJAX

    Telefone:

    CPF:

    CEP:

    Data:

    me dê uma ajuda por favor!

    Att.

    • Robson Moulin 4 de agosto de 2012 16:22

      Olá, basta seguir o passa a passo, chequei tudo e não possui erros, bom agora aproveitando o link mascara em telefones celulares serão problemas, pois agora os telefones de São Paulo terão 9 na frente usar essas validações para telefones serão complicadas.

      • André Moraes 20 de maio de 2014 12:13

        Pode-se criar uma regrar onde verifica os DDDs e onde tem o numero 9 na frente.

Deixe o seu comentário

Seu endereço de email não será publicado.

Você pode usar HTML tags e atributos: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>