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')">

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;

Esta imagem é um GIF animado. Clique sobre a imagem caso a animação não inicie.

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.