Masks with jQuery: phone, CPF and CNPJ

Question

Masks with jQuery: phone, CPF and CNPJ

I need to create some masks for CPF, CNPJ and phone. The problem is that I have never used jQuery and have never done anything like this before. I would like someone to help me because I searched for 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 I don't know how do I implement it in my project. If anyone can give me one brief explanation I will be grateful, I thank you from now on.

9

jquery jquery-plugins

Author: Alexandre N., 2016-06-30

Source

1 answers

score 31 · Accepted Answer

Well, I'm going to do 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");

Will locate the HTML element whose Id is "my-div". And still:

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

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

Typically, jQuery notation is done by replacing jQuery with only $.

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 document has already been entire loaded before executing anything. A cliche of using jQuery inside an HTML page it would be something like:

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

That is, we select the document:

$(document)

And in 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 () { ... });

Before all this, you need to add a reference to jQuery within your HTML. This can be easily done using a CDN, like this:

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

Using masks

@rray has placed several links to its masks. The idea then is:

select which HTML elements will have the mask;
apply the mask function to them.

I will 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 jQuery mask function to them 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 masked.

Finally, I will put a test box with everything so that 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" />