Masks with jQuery: Phone, CPF and CNPJ

Question

Masks with jQuery: Phone, CPF and CNPJ

Navigation

#1 by (20 votes)

6

I need to create some masks for CPF, CNPJ and phone. The problem is that I've never used jQuery and I've never done any of this before. I would like somebody to help me because I looked for some things on the internet, like jQuery Plugin Mask, but I do not know how to use it, how to import it into my project.

link

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

jquery jquery-plugins

asked by anonymous 30.06.2016 / 19:31

1 answer

How to invert the position of a div (and its contents and attributes) with another div? How to get weather and weather information?

score 20 · Accepted Answer

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

It will locate the tag <body> of the document.

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

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

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

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

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

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

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

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

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

That is, we selected the document:

$(document)

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

$(document).ready();

We give it an (anonymous) function that performs everything we need, such as putting on 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, 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 the masks

@rray has put several links to your masks . The idea then is:

Select which HTML elements will have the mask;

Apply the mask function on them.

I'll give you an example. The rest is up to you.

Suppose your CPF field looks like this:

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

Let's first select your field:

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

And apply the mask function of the jQuery Mask Plugin:

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

Do not forget to add the jQuery Mask Plugin script before this execution:

<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 a 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><scripttype="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.0/jquery.mask.js"></script><inputtype="text" id="CPF" name="CPF" />