Neste artigo vou ensinar como você pode criar máscaras de texto, números e dinheiro para ser inserido no input do seu html. As máscaras são muito importantes quando você precisa de uma informação valiosa do usuário, como seu telefone, e gostaríamos de algo bonito e fácil de ler, como (11) 9 8765-4321. Contudo, sabemos que um simples placeholder não será o suficiente para nos livrar das loucuras que o usuário sempre faz (você sabe do que estou falando). Para isso, podemos utilizar as máscaras. As máscaras impedem que o usuário insira espaços e caracteres indesejados onde não deve.
Neste artigo irei mostrar duas formas de fazer isso, ambas de forma bem simples. Primeiramente ensinarei a criar sua própria máscara de uma forma bem simples através de um plugin oferecido pelo Jquery. Em seguida, irei disponibilizar um código secundário onde você pode simplesmente copiar (ou baixar o .js) e inserir no meio de seus javascripts e já estará funcionando sem esforço.
As máscaras oferecidas pelo Jquery são bem simples de aprender a utilizar e também são bem modulares para vários tipos de campos.
Para isso, será necessário que você implemente o plugin no seu projeto:
<script src="https://igorescobar.github.io/jQuery-Mask-Plugin/js/jquery.mask.min.js"></script>
Uma vez referenciado os .js em seu projeto, vamos tratar dos scripts. Veja e analise os seguinte código abaixo:
$('.telefone').mask('(00) 0 0000-0000');
$('.dinheiro').mask('#.##0,00', {reverse: true});
$('.estado').mask('AA');
através dele, basta chamar os inputs em html referenciando suas respectivas classes:
input type="text" name="telefone" class="telefone form-control" placeholder="(17) 9 9173-3578" />
<label for="dinheiro">R$</label><input type="text" id="dinheiro" name="dinheiro" class="dinheiro form-control" style="display:inline-block" />
<input type="text" id="estado" name="estado" class="estado form-control" placeholder="UF" />com isso teremos:
Simples, não?
No javascript, basta substituir onde seriam os caracteres digitados pelo usuário por 0 em caso de números, ou por A em caso de texto.
É simplesmente isso a regra do plugin. Você pode brincar a vontade.
Perceba também a propriedade reverse(true), que como o próprio nome diz, ele inverte o padrão da digitação neste campo.
Exemplos e demonstrações
Segue abaixo alguns exemplos que deixei fácil para você simplesmente pegar e utilizar em seu projeto:
<input type="text" name="cpf" class="cpf form-control" placeholder="Digite seu CPF" />
<input type="text" name="cnpj" class="cnpj form-control" placeholder="Digite o CNPJ" />
<input type="text" name="rg" class="rg form-control" placeholder="Digite seu RG" />
<input type="text" name="cep" class="cep form-control" placeholder="Digite o CEP" />
<input type="text" name="dataNascimento" class="dataNascimento form-control" placeholder="Digite sua data de nascimento" />
<input type="text" name="placaCarro" class="placaCarro form-control" placeholder="Digite a placa do carro" />
<input type="text" name="horasMinutos" class="horasMinutos form-control" placeholder="Digite as horas e os minutos" />
<input type="text" name="cartaoCredito" class="cartaoCredito form-control" placeholder="Digite o número do cartão de crédito" />Seus respectivos códigos em javascript:
$('.cpf').mask('000-000.000-00');
$('.cnpj').mask('00.000.000/0000-00');
$('.rg').mask('00.000.000-0');
$('.cep').mask('00000-000');
$('.dataNascimento').mask('00/00/0000');
$('.placaCarro').mask('AAA-0000');
$('.horasMinutos').mask('00:00');
$('.cartaoCredito').mask('0000 0000 0000 0000');Essas são algumas funções bem básicas do plugin do Jquery para máscaras, mas você pode se aprofundar muito mais e criar máscara mais personalizadas.