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