11

Preciso criar algumas máscaras para CPF, CNPJ e telefone. O problema é que eu nunca utilizei jQuery e nunca fiz nada disso antes. Gostaria que alguém me ajudasse porque procurei algumas coisas na internet, como jQuery Plugin Mask, mas não sei como usar, como importar no meu projeto.

http://igorescobar.github.io/jQuery-Mask-Plugin/

Eu baixei esse código mas não sei como faço para implementá-lo no meu projeto. Se alguém puder me dar uma breve explicação ficarei grato, desde já agradeço.

1

1 Resposta 1

36

Bom, vou fazer uma introdução super rápida ao jQuery, o suficiente para que você leia outros materiais e entenda.

Introdução ao jQuery (em 2 minutos e meio, eu acho)

jQuery é uma ferramenta que localiza um ou mais componentes na tela. A notação é muito parecida com a do CSS. Por exemplo:

teste = jQuery("body");

Irá localizar a tag <body> do documento.

teste2 = jQuery("#minha-div");

Irá localizar o elemento HTML cuja Id seja "minha-div". E ainda:

teste3 = jQuery(".minha-classe");

Localiza todos os elementos HTML cuja class seja "minha-classe".

Normalmente, a notação de jQuery é feita substituindo jQuery por apenas $.

teste3 = $(".minha-classe");

Todo script do jQuery deve ser executado dentro de tags <script> e </script>. Como boa prática, colocamos essas tags antes de </body>.

Ainda, é outra boa prática testar se o documento já foi inteiro carregado antes de executar qualquer coisa. Um clichê do uso de jQuery dentro de uma página HTML seria algo como:

<html>
<head>
</head>
<body>
    ...
    <script>
        $(document).ready(function () { ... });
    </script>
</body>
</html>

Ou seja, selecionamos o documento:

$(document)

E no evento ready() do documento, ou seja, quando ele estiver pronto:

$(document).ready();

Passamos para ele uma função (anônima) que realiza tudo o que precisarmos, como por exemplo colocar as máscaras.

$(document).ready(function () { ... });

Antes de tudo isso, você precisa adicionar uma referência para o jQuery dentro do seu HTML. Isso pode ser facilmente feito usando um CDN, assim:

<html>
<head>
    ...
    <script src="https://code.jquery.com/jquery-2.2.4.js" integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI=" crossorigin="anonymous"></script>
</head>
<body>
    ...
    <script>
        $(document).ready(function () { ... });
    </script>
</body>
</html>

Usando as máscaras

O @rray colocou vários links para as suas máscaras. A ideia então é:

  1. Selecionar quais elementos HTML terão a máscara;
  2. Aplicar neles a função de máscara.

Vou colocar um exemplo. O resto é com você.

Suponha que seu campo de CPF seja assim:

<input type="text" id="CPF" />

Vamos primeiro selecionar seu campo:

<script>
    $(document).ready(function () { 
        var $seuCampoCpf = $("#CPF");
    });
</script>

E aplicar neles a função de máscara do jQuery Mask Plugin:

<script>
    $(document).ready(function () { 
        var $seuCampoCpf = $("#CPF");
        $seuCampoCpf.mask('000.000.000-00', {reverse: true});
    });
</script>

Não esqueça de adicionar o script do jQuery Mask Plugin antes desta execução:

<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script>
<script>
    $(document).ready(function () { 
        var $seuCampoCpf = $("#CPF");
        $seuCampoCpf.mask('000.000.000-00', {reverse: true});
    });
</script>

Se você fez tudo certo, o seu campo CPF deve aparecer com máscara.

Por fim, vou colocar uma caixinha de testes com tudo para que você possa testar aqui mesmo no site.

    $(document).ready(function () { 
        var $seuCampoCpf = $("#CPF");
        $seuCampoCpf.mask('000.000.000-00', {reverse: true});
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script>
<input type="text" id="CPF" name="CPF" />

5
  • 3
    Cara muito obrigado por essa explicação, eu achava muitos tutorias na internet e ate explicações mas não estava conseguindo assimilar tudo, com a sua explicação agora esta tudo bem claro. Muito obrigado. 1/07/2016 às 11:28
  • 1
    Muito boa a explicação, só não utilizo o {reverse: true} pois ele não tem ponto de parada e ainda não entendi onde posso utilizar.
    – WMomesso
    11/10/2017 às 19:35
  • 4
    O {reverse: true} é usado para controlar se a máscara é do primeiro ao último caractere ou ao contrário. Por exemplo em um campo de CPF, se você começa a digitar o CPF com "123456" com {reverse: true} a máscara vai ser preenchida dessa forma: "1.234-56. Por outro lado, se o campo está com {reverse: false}, ficaria assim: "123.456". 24/11/2017 às 19:00
  • 1
    Muito boa a explicação !!!!!! 30/12/2017 às 15:22
  • Também é possível usar o <input type="tel"> pra limitar aos caracteres numéricos, principalmente em celulares. 31/01/2022 às 20:06

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .