Masks with jQuery: Phone, CPF and CNPJ

Asked

Viewed 50,008 times

10

I need to create some masks for CPF, CNPJ and phone. The problem is that I have never used jQuery and have never done any of this before. I would like someone to help me because I searched some things on the internet, like jQuery Plugin Mask, but I don’t know how to use, how to import in my project.

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

I downloaded this code but do not know how to implement it in my project. If anyone can give me a brief explanation I would be grateful, I thank you in advance.

jquery jquery-plugins

1 answer

31


Well, I will make a super quick introduction to jQuery, enough for you to read other materials and understand.

Introduction to jQuery (in 2 and a half minutes, I think)

jQuery is a tool that locates one or more components on the screen. The notation is very similar to that of CSS. For example:

teste = jQuery("body");

Will locate the tag <body> of the document. 

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

It will locate the HTML element whose Id is "my-div". And:

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

Locates all HTML elements whose class be "my-class".

Normally, jQuery notation is done by substituting jQuery by just $. 

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

Every jQuery script must be executed within tags <script> and </script>. As good practice, we put these tags before </body>.

Still, it is another good practice to test whether the entire document has already been loaded before performing anything. A cliché of using jQuery within an HTML page would be something like:

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

That is, we select the document:

$(document)

And at the event ready() of the document, that is, when it is ready:

$(document).ready();

We pass to him a function (anonymous) that performs everything we need, such as putting the masks.

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

First of all, you need to add a reference to jQuery within your HTML. This can be easily done using a CDN, thus:

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

Wearing the masks

@rray posted several links to their masks. The idea then is:

  1. Select which HTML elements will have the mask;
  2. Apply the mask function to them.

I’ll put an example. The rest is up to you.

Suppose your CPF field is like this:

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

Let’s first select your field:

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

And apply to them the mask function of jQuery Mask Plugin:

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

Don’t forget to add the jQuery Mask Plugin script before this run:

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

If you did everything right, your CPF field should appear with mask.

Finally, I’ll put a test box with everything so you can test right here on the 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" />

  • 3

    Thank you so much for this explanation, I found many tutorials on the internet and even explanations but I was not able to assimilate everything, with your explanation now it is very clear. Thank you very much.

  • 1

    Very good explanation, I just don’t use the {reverse: true} because it has no stopping point and still not understood where I can use.

  • 3

    The {reverse: true} is used to control whether the mask is from the first to the last character or the other way around. For example in a CPF field, if you start typing the CPF with "123456" with {reverse: true} the mask will be filled this way: "1.234-56. On the other hand, if the field is with {reverse: false}, would look like this: "123,456".

  • 1

    Very good the explanation !!!!!!

Browser other questions tagged jquery jquery-plugins

You are not signed in. Login or sign up in order to post.