Como formatar campos de CPF, CEP, Telefone e moeda com jQuery (jMask)

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 - http://profanderson.blog.etecarmine.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>

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

<input type="text" class="form-control" onkeypress="$(this).mask('90,00')">

Máscara de formatação para Moeda / Dinheiro

<input type="text" class="form-control" onkeypress="$(this).mask('R$ 999.990,00')">

Máscara de formatação para Telefone

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

><input type="text" class="form-control" onkeypress="$(this).mask('00h 00m')">

Exemplo do código funcionando.

O formulário acima pode ser testado em https://aulas-profanderson.azurewebsites.net/tpi/formatar-campos-jquery-mask/

Download.

https://aulas-profanderson.azurewebsites.net/tpi/formatar-campos-jquery-mask/formatar-campos-jquery-mask.zip

É isso aí, bons estudos!

Deixe seu comentário