Masks with jQuery: Phone, CPF and CNPJ

Question

Masks with jQuery: Phone, CPF and CNPJ

Asked 8 years ago

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.

4

Here are some examples using pure javascript, others, different plugings. Phone Mask Using jQuery Mask Plugin, Mask for CPF and CNPJ in the same field and Digitalbush plugin for CNPJ and CPF masks in the same field

– rray

2016/06/30 at 17:43

1 answer

Browser other questions tagged jquery jquery-plugins

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

by Leonel Sanches da Silva • **88,623** points · Answer 1 · 2016-06-30T18:37:43+00:00

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:

Select which HTML elements will have the mask;
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" />