Logotipo Design Interativo
mascara-de-formularios

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


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/

Comentários
  1. Ricardo disse:

    obrigado pelas dicas muito legal!!

  2. Homero disse:

    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 disse:

    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 disse:

      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.

Deixe o seu comentário!

publicidade
publicidade
publicidade

Design Tools

Links

Conheça sites sobre ux, design, front-end, comunicação, inspiração e muito mais, fique por dentro das novidades do mercado com nossa lista.


Profissionais Influentes

Conheça os profissionais que influenciam e trabalham para a comunidade de design e fron-end e user experience, confira o Twitter de cada um.


Curta nossa fanpage e fique por dentro das novidades do site
publicidade
publicidade
publicidade