Poucos anos atrás formatar campos de formulário sempre foi uma coisa muito chata e trabalhosa. Desenvolvedores sempre tinham a mão suas bibliotecas de funções de máscara de formatação para os mais variados campos de cadastro de um formulário HTML.
Mas, com o advento dos frameworks JS, em especial o jQuery este trabalho ficou ainda mais simples. Lhe apresento na aula de hoje a biblioteca jQuery Mask
Criando um formulário HTML
Vamos considerar o seguinte formulário, contendo os campos de texto para;
- CPF
- CEP
- Altura / Peso
- Moeda
- Telefone de 8 ou 9 dígitos
- Data
- CNPJ
- Hora
Usando BootStrap 4, o código ficaria assim;
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="utf-8"> <title>Como formatar campos do Formulário / Máscara - jQuery Mask</title> <meta name="description" content="Aprenda a formatar máscaras de forma muito simples e rápida usando a biblioteca jQuery Mask"> <meta name="author" content="Prof. Anderson Luiz de Oliveira - https://www.blogson.com.br/"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <div class="form-row"> <div class="form-group col-md-4"> <label>CPF</label> <input type="text" class="form-control"> </div> <div class="form-group col-md-4"> <label>CNPJ</label> <input type="text" class="form-control"> </div> <div class="form-group col-md-4"> <label>CEP</label> <input type="text" class="form-control"> </div> </div> <div class="form-row"> <div class="form-group col-md-4"> <label>Altura / Peso</label> <input type="text" class="form-control"> </div> <div class="form-group col-md-4"> <label>Moeda / Dinheiro</label> <input type="text" class="form-control"> </div> <div class="form-group col-md-4"> <label>Telefone</label> <input type="text" class="form-control"> </div> </div> <div class="form-row"> <div class="form-group col-md-4"> <label>Data</label> <input type="text" class="form-control"> </div> <div class="form-group col-md-4"> <label>Hora</label> <input type="text" class="form-control"> </div> </div> </div> </body> </html>
O resultado:
Adicionando a biblioteca jQuery Mask ao projeto
O que temos que fazer é muito simples, basta adicionar o CDN do jquery Mask logo abaixo do CDN do jQuery
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mask/1.14.15/jquery.mask.min.js"></script>
Criando as máscaras de formatação
Agora vamos para as máscaras, para isso irei utilizar o evento onkeypress do JavaScript. A sintaxe do jQuery Mask segue a seguinte lógica;
Máscara de formatação para CPF
<input type="text" class="form-control" onkeypress="$(this).mask('000.000.000-00');">
Máscara de formatação para CNPJ
<input type="text" class="form-control" onkeypress="$(this).mask('00.000.000/0000-00')">
Máscara de formatação para CEP
<input type="text" class="form-control" onkeypress="$(this).mask('00.000-000')">
Máscara de formatação para Altura ou Peso
Utilize o {reverse: true};) caso queira permitir que o usuário digite a vírgula.
<input type="text" maxlength="5" class="form-control" onkeypress="$(this).mask('90,00', {reverse: true});)">
Máscara de formatação para Moeda / Dinheiro
<input type="text" class="form-control" onkeypress="$(this).mask('R$ 999.990,00')">
ou utilize o {reverse: true};) caso queira permitir que o usuário digite a vírgula.
<input type="text" class="form-control" onkeypress="$(this).mask('R$ #.##0,00', {reverse: true});">
Máscara de formatação para Telefone com 8 e 9 dígitos
Obs: A máscara aceita tanto 8 ou 9 dígitos.
<input type="text" class="form-control" onkeypress="$(this).mask('(00) 0000-00009')">
Máscara de formatação para Data
<input type="text" class="form-control" onkeypress="$(this).mask('00/00/0000')">
OBS: Você também pode formatar a data usando JS puro conforme explica este artigo – Como Formatar Data em JavaScript do Jeito Fácil
Máscara de formatação para Hora
<input type="text" class="form-control" onkeypress="$(this).mask('00:00')">
ou se preferir, também pode ser assim;
<input type="text" class="form-control" onkeypress="$(this).mask('00h 00m')">
Exemplo do código funcionando.
O resultado será este;
Opção 2 – Máscaras com métodos jQuery
Se você já tem facilidade com programação usando jQuery() é bem provável que você prefira não utilizar o evento onkeypress do DOM JS e sim, preferir usar funções do jQuery no lugar.
Neste caso, será necessário identificar todos os inputs usando o atributo ID e depois criar as funções. O método keypress() do jQuery subsistiu o evento onkeypress(), ficando assim;
<input id="cpf" type="text" class="form-control">
<script>
$( "#cpf" ).keypress(function() {
$(this).mask('000.000.000-00');
});
</script>
Este mesmo raciocínio se repete para todos os outros inputs. Você pode ver um exemplo completo clicando no botão abaixo;
Download.
Você pode fazer também fazer o download dos dois exemplos clicando no botão abaixo:
.
Bônus – Exigir que todos os números do CPF, Telefone e CNPJ sejam digitados!
Uma dica bem legal é limitar a quantidade de caracteres a serem digitados nos campos mais importantes, infelizmente o usuário pode digitar uma quantidade de números menor do que a máscara e obviamente ela irá aceitar isso.
Para resolver este problema, o HTML 5 oferece os atributos minlength e maxlength . Então se você quiser obrigar que o visitante do site preencha todos os campos do CPF por exemplo basta codificar;
<input type="text" minlength="14" maxlength="14" class="form-control" onkeypress="$(this).mask('000.000.000-00');">
É isso aí, se gostou do artigo deixei um comentário. Até a próxima.
