jQuery Mask – Máscaras para campos HTML utilizando jQuery

Um método realmente fácil de utilizar máscaras em campos HTML com jQuery é o pluguin Masked Input Pluguin, basta informar um simples comando para criar a máscara.

Para construir as máscaras temos as seguintes regras:

a – Representa um caractere alfabético (AZ, az)
9 – Representa um carácter numérico (0-9)
* – Representa um caractere alfanumérico (AZ, az ,0-9)

Exemplos:

– Para um campo tipo data precisamos de uma máscara no formato DD/MM/AAAA. Como só é necessário utilizar números vamos informar o ‘9’ para fazer a regra. A referência ao campo HTML é feita através da propriedade id.

 <input type="text" id="campoData">

Neste caso o comando que informa a máscara será:

 $("#campoData").mask("99/99/9999"); 

 

– Um campo para informar telefone no formato (DDD) 1234-1234
Campo:

 <input type="text" id="campoTelefone"> 

Máscara:

 $("#campoTelefone").mask("(999) 9999-9999"); 

 

– Supondo há necessidade de uma máscara para utilizar todos os tipos de caractéres no formato XXX-XXXX:
Campo:

 <input type="text" id="campoSenha"> 

Máscara:

 $("#campoSenha").mask("***-****"); 

 

Resumo:

<input type="text" id="campoData">
<input type="text" id="campoTelefone">
<input type="text" id="campoSenha">

<script>
jQuery(function($){
$("#campoData").mask("99/99/9999");
$("#campoTelefone").mask("(999) 999-9999");
$("#campoSenha").mask("***-****");
});
</script>

 

Exemplo:

 

Para mais informações consulte o site do pluguin: http://digitalbush.com/projects/masked-input-plugin/

Gostou? Compartilhe!

Compartilhe:

Postado por tpastorello

Leia Mais:

51 respostas para “jQuery Mask – Máscaras para campos HTML utilizando jQuery”

  1. Rafael disse:

    Show de bola o tuto….

    Parabéns.

  2. Farley disse:

    Vc já tentou aplicar este recurso de máscara em custom field do WordPress?

  3. Victor Hugo disse:

    E ai fera?
    Cara curti muito a dica porém não estou conseguindo fazê-la funcionar…
    Peço para exibir o codigo fonte, copio o mesmo e salvo em documento “.html” e abro a documento no Chrome e as máscaras não funcionam…

    Teria como você me ajudar?

  4. Rafael disse:

    Boa noite,
    como utilizar na seguinte situação?
    eu tenho um campo que vai receber valor de salario:
    vou colocar a mascara “999.999,99”
    porem se usuario tentar digitar 99,99 a mascara nao vai permitir.
    tem como corrigir isto?

    Obrigado!

  5. Paulo disse:

    N estou conseguindo, como eu instalo esse Plugin

  6. fernando disse:

    legal! parabéns!

  7. Alex disse:

    Valeu, boa dica!

  8. Dúvida: Agora com o nono dígito em alguns números de SP preciso fazer com que aceite oito ou nove digitos no mesmo campo. Poderia ajudar?

  9. Diogo Melo disse:

    Muito legal o post. Estou com uma dúvida. Como eu faço para a máscara aceitar estes dois formatos de telefone?

    “(99) 9999-9999” e “(99) 99999-9999”

    Para o caso dos telefones da cidade de São Paulo.

    • tpastorello disse:

      Olá Diogo.

      Para isso você vai ter que fazer uma regra, que ao escolher o estado de são paulo a máscara aplicada seja diferente, não é possível aplicar a mesma máscara para as duas situações. Alguma coisa parecida com isto:

      if($(‘#uf’).val()==”SP”){
      $(“#campoTelefone”).mask(“(99) 99999-9999”);
      }else{
      $(“#campoTelefone”).mask(“(99) 9999-9999”);
      }

      att;

    • José Ivan Marciano Junior disse:

      Diogo, eu faço da seguinte forma para máscarar meu campo de acordo com o novo padrão para celulares:

      $(‘#telefone’).focusin(function(){
      $(‘#telefone’).mask(“(99) 99999999?9″);
      });
      $(‘#telefone’).focusout(function(){
      var phone, element;
      element = $(this);
      element.unmask();
      phone = element.val().replace(/\D/g, ”);
      if(phone.length > 10) {
      element.mask(“(99) 99999-999?9”);
      } else {
      element.mask(“(99) 9999-9999?9”);
      }
      }).trigger(‘focusout’);

      Espero ajudá-lo.

  10. BK disse:

    Bom plugin, mas tenho uma duvida, como trataria um campo onde só é permitido “alfha”(letras).

  11. Antonio Marcos Alves disse:

    Olá, tenho um campo nota que estou aplicando essa máscara, porém estou com um problema. Só estou conseguindo colocar a máscara dessa forma “999.99” ou “99.99”, porém como se trata de um campo nota eu queria a seguinte regra se o usuário digitar 100.00 aplicar uma máscara, se o usuário digitar 67.76 aplicar outra máscara. Tenho que criar uma função pra tratar essa máscara?

  12. é o que todos nos procuramos, simples e funcional! PARABÉNS!

  13. NELSON COSTA disse:

    Por que o CTRL V não funciona nesses campos com máscara?

  14. Carlos Augusto dos Santos disse:

    Ola, legal como eu posso usar esse recurso para moeda, estou usando o number format que funciona bem. Eu quero colocar esse recurso no campo de forma que os valores conforme digitados apareçam no formato de moeda é possível?

  15. Augusto César Henriques disse:

    Olá amigo, obrigado pelo plugin! MUITO SHOW DE BOLA E facíiiiiiiiiilimo de usar! Resolve realmente a chatisse de ficar criando várias mascaras com funções malucas que sempre dão problema =D

    Eu li os posts e posso ter papado mosca, mas estava com uma dificuldade para retornar valor no campo que eu apliquei a mascara.

    Então caso algum programador esteja levando esta coça tb, deixo a dica de usar o jQuery mesmo.

    Tipo:

    //aplicando a mascara no campo input com id input-data-inicio

    $(“#input-data-inicio”).mask(“99/99/9999”);

    Para retornar o valor no campo eu usei o .val() do próprio jQuery

    $(“#input-data-inicio”).val(“”);

    Eu uso PHP, mas creio que nas outras linguagens será fácil de retornar da mesma forma, basta usar a sintaxe desejada

    Obrigado e parabéns pelo trabalho!

  16. Naidion disse:

    Comigo está ocorrendo o seguinte erro. Em um input com máscara 99/99/9999, quando digito a data ele vai adicionando um “_” ficando assim: _1/_1/_1_1.
    Sabe o que pode estar ocorrendo?

  17. Welington Almeida disse:

    Cara,

    ótimo tutorial, parabéns!

    Porém estou com um probleminha.Se meu campo está preenchido e com o atributo readonly=true, ainda está sendo possivel alterar os dados do campo, bem como apagar!

    Isto só acontece em campos que utilizam mascara.

    Se possivel, teste e me dê um feedback se acontece o mesmo com vc!

    valeu Abraços

  18. Luis Carlos Quinhone disse:

    jQuery(function($)
    {

    $(‘#cur_telefone’).focusin(function()
    {
    $(‘#cur_telefone’).val(”);
    $(‘#cur_telefone’).unmask();
    });

    $(‘#cur_telefone’).focusout(function()
    {
    if($(this).val().length > 8)
    {
    $(“#cur_telefone”).mask(“99999-9999”);
    }
    else
    {
    $(“#cur_telefone”).mask(“9999-9999”);
    console.log($(“#cur_telefone”).val());
    }

    });

    });

  19. Luis Carlos Quinhone disse:
    <script>
      jQuery(function($)
      {
    
        $('#cur_telefone').focusin(function()
        {
          $('#cur_telefone').val('');
          $('#cur_telefone').unmask();
        });
    
        $('#cur_telefone').focusout(function()
        {
          if($(this).val().length > 8)
          {
            $("#cur_telefone").mask("99999-9999");
          }
          else
          {
            $("#cur_telefone").mask("9999-9999");
            console.log($("#cur_telefone").val());
          }
    
        });
    
      });
    </script>
  20. Luis Carlos Quinhone disse:

    jQuery(function($)
    {

    $(‘#cur_telefone’).focusin(function()
    {
    $(‘#cur_telefone’).val(”);
    $(‘#cur_telefone’).unmask();
    });

    $(‘#cur_telefone’).focusout(function()
    {
    if($(this).val().length > 8 )
    {
    $(“#cur_telefone”).mask(“99999-9999”);
    }
    else
    {
    $(“#cur_telefone”).mask(“9999-9999”);
    console.log($(“#cur_telefone”).val());
    }

    });

    });

  21. Luis Carlos Quinhone disse:
    <script>
      jQuery(function($)
      {
    
        $('#cur_telefone').focusin(function()
        {
          $('#cur_telefone').val('');
          $('#cur_telefone').unmask();
        });
    
        $('#cur_telefone').focusout(function()
        {
          if($(this).val().length > 8 )
          {
            $("#cur_telefone").mask("99999-9999");
          }
          else
          {
            $("#cur_telefone").mask("9999-9999");
            console.log($("#cur_telefone").val());
          }
    
        });
    
      });
    </script>
  22. Miro Lago disse:

    Muito útil!!
    Obrigado pela ajuda, amigo.

  23. Mozart Rezende disse:

    Ótima contribuição.

    Parece que estou deixando passar alguma coisa importante.

    Tudo funciona na minha aplicação, desde que eu use as definições do tipo ($(“#campoData”).mask(“99/99/9999”);) debaixo de ($(document).ready(function(){ ).

    Isto funciona bem quando eu sei de antemão quais são as máscaras que vou usar.

    No entanto, eu quero passar máscaras diferentes para o mesmo campo, dependendo do valor do mesmo.

    Pelo que entendi, preciso passar a máscara pelo HTML, usando (.

    Isto não está funcionando comigo. Alguma sugestão?

    Desde já agradeço e obrigado.

  24. Mozart Rezende disse:

    Retificando: … usando o campo ‘data-mask’ …

  25. Diego disse:

    Olá.

    Qual é o download que tem que ser feito? Não encontro o link…..

    Obrigado!

  26. jose soazres disse:

    PARABENS!
    perfeito!
    amigos, agora preciso formatar os campos exibidos na grade … nao ‘e entrada (input) e’ apenas formatar os campos que vem do banco para exibili-los numa grade de consulta…
    existe uma biblioteca jquery pra isso???
    aguardo e agradeco a dicas
    PARABENS!!!

  27. MauroHorta disse:

    Ótima a explanação sobre o uso de máscaras, mas como faria se só quisesse letras maiúsculas?
    Uma máscara para receber até 5 letras maiúsculas, por exemplo

    • Anaxi Melo disse:

      Mauro,

      Para deixar tudo em Maiúsculo, você pode tentar:

      $(“#nome_do_campo”).keyup(function(){$(“#nome_do_campo”).val($(“#nome_do_campo”).val().replace(/([a-z-çáàãâäéèẽêëíìĩîïóòõôöúùũûü])/,function(s){return s.toUpperCase();}))});
      $(“#nome_do_campo”).keypress(function(){$(“#nome_do_campo”).val($(“#nome_do_campo”).val().replace(/([a-z-çáàãâäéèẽêëíìĩîïóòõôöúùũûü])/,function(s){return s.toUpperCase();}))});

      E para aceitar aceitar somente os 05 (cinco) caracteres:

      $(“#nome_do_campo”).mask(“aaaaa”);

  28. Daniel Buche disse:

    Máscara genérica para campos numéricos em JavaScript: http://goo.gl/otlbMl

  29. Sergio disse:

    Parabéns pelo conteúdo. Bem explicado e objetivo.

  30. Gus Lima disse:

    Show de bola, obrigado por compartilharem!

  31. Joao disse:

    Muito obrigado amigo!

  32. Gedilson disse:

    Muito boa sua dica. Muito bom mesmo.

  33. Juliano disse:

    É possível realizar este mesmo processo com MVC Asp.Net C# ???

    @Html.EditorFor(model => model.Telefone)
    @Html.ValidationMessageFor(model => model.Telefone)

  34. Juliano disse:

    É possível realizar este mesmo processo com MVC Asp.Net C# ??? – See more at: http://vinteum.com/jquery-mask-mascaras-para-campos-html-utilizando-jquery/#comment-50118

  35. Luan disse:

    Gostei muito do plugn, mas usei ele em um site, e percebi que no meu celular ele n pegou, ele fica empurrando a mascara, saberias dizer o porquê disso…

    Meu celular é um Xperia E1

Deixe uma resposta

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