Neste artigo, aprenderemos a importar e utilizar o Mask, criado por Igor Escobar e usa como base o jQuery.
O Mask permite que você crie máscaras personalizadas para os seus campos de input. Isso auxilia no formato dos seus dados. Por exemplo, se você quiser criar uma máscara para o seu input que captura a data, você consegue personalizar criando algo no formato (’00/00/0000′).
Download do plugin:
Você pode realizar o download do Mask no site:
http://igorescobar.github.io/jQuery-Mask-Plugin/
Após o download, você deve inserir a biblioteca no seu HTML utilizando a tag <script>.
Você também pode utilizar diretamente o CDN para importar sua biblioteca ao seu projeto, utilizando o seguinte comando:
<script src="hhttps://cdnjs.com/libraries/jquery.mask"></script>
É importante salientar que você precisa importar o jQuery no seu <head> do seu projeto. Você pode importar o jQuery do seu projeto utilizando o CDN:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
Como é a sintaxe?
É uma sintaxe simples, onde primeiramente é passado o seletor, seguido do .mask e o parâmetro que será utilizado. Por exemplo, no seu arquivo HTML você tem um campo de input para receber uma data:
<label>DATA</label> <input type="text" class="date">
No seu arquivo de scripts, tudo o que você precisará para fazer a máscara funcionar é:
$(document).ready(function(){
$('.date').mask('00/00/0000')
});
E com isso, já obtemos todas as vantagens do plugin. Essa seria a sua saída:
Mas o plugin não se aplica somente a datas. Com a utilização do Mask, podemos criar máscaras de input para CEP, CPF, Telefones e tantas outras possibilidades. Tudo que precisamos fazer é criar uma classe para cada tipo de input que utilizaremos na nossa página e utilizar essa classe no nosso script jQuery, como fizemos no exemplo anterior. Veja:
HTML:
<label>DATA</label> <input type="text" class="date"> <label>HORAS</label> <input type="text" class="time"> <label>CEP</label> <input type="text" class="cep"> <label>TELEFONE</label> <input type="text" class="phone"> <label>CPF</label> <input type="text" class="cpf"> <label>DINHEIRO</label> <input type="text" class="money">
E o nosso código jQuery:
$(document).ready(function(){
$('.date').mask('00/00/0000');
$('.time').mask('00:00:00');
$('.cep').mask('00000-000');
$('.phone').mask('(00) 00000-0000');
$('.cpf').mask('000.000.000-00');
$('.money').mask('000.000.000.000,00');
});
E teremos nossa saída:
Gostou deste artigo? Comente abaixo!
Referências: http://www.igorescobar.com/blog/2012/03/13/mascaras-com-jquery-mask-plugin/