Máscaras para CEP-RG-CPF em JavaScript

As máscaras de entrada são muito úteis para garantir que o usuário insira informações em um formato padronizado, como CEP, RG e CPF, facilitando a validação e o envio de dados corretos. Neste post, vamos aprender máscaras para CEP-RG-CPF em JavaScript puro, sem a necessidade de bibliotecas externas, garantindo um controle mais preciso sobre os dados inseridos.

1. O que é uma máscara de entrada?

Uma máscara de entrada define um formato específico para a entrada de dados em campos de formulário. No caso de CEP, RG e CPF, os formatos comuns são:

• CEP: 99999-999 (8 dígitos com um hífen após o quinto dígito).
• RG: 99.999.999-9 (9 dígitos, divididos por pontos e hífen).
• CPF: 999.999.999-99 (11 dígitos, divididos por pontos e hífen).

Agora vamos ver como implementar essas máscaras em JavaScript.

2. Máscara para CEP

A máscara para o CEP deve garantir que os primeiros cinco dígitos sejam separados dos três últimos por um hífen.

HTML e JavaScript:

<form>
    <label for="cep">CEP:</label>
    <input type="text" id="cep" maxlength="9" oninput="mascaraCEP(this)" placeholder="00000-000" />
</form>

<script>
function mascaraCEP(input) {
    const valor = input.value.replace(/\D/g, '');  // Remove caracteres não numéricos
    input.value = valor.replace(/^(\d{5})(\d)/, '$1-$2');  // Adiciona o hífen após o quinto dígito
}
</script>

Explicação:

• Usamos replace(/\D/g, '') para remover qualquer caractere que não seja numérico.
  
  
• A segunda replace() adiciona um hífen automaticamente após os cinco primeiros dígitos.

3. Máscara para RG

A máscara do RG é semelhante à do CPF, com pontos separando os grupos de dígitos e um hífen antes do dígito final.

HTML e JavaScript:

<form>
    <label for="rg">RG:</label>
    <input type="text" id="rg" maxlength="12" oninput="mascaraRG(this)" placeholder="00.000.000-0" />
</form>

<script>
function mascaraRG(input) {
    const valor = input.value.replace(/\D/g, '');  // Remove caracteres não numéricos
    input.value = valor.replace(/(\d{2})(\d)/, '$1.$2')  // Adiciona o primeiro ponto
                       .replace(/(\d{5})(\d)/, '$1.$2')  // Adiciona o segundo ponto
                       .replace(/(\d{8})(\d)/, '$1-$2'); // Adiciona o hífen
}
</script>

Explicação:

• Primeiro removemos qualquer caractere não numérico.
  
  
• Em seguida, adicionamos os pontos e o hífen nos lugares corretos conforme o usuário digita.

4. Máscara para CPF

A máscara para CPF segue o padrão de três blocos de três dígitos separados por pontos, e um hífen antes dos dois últimos dígitos.

HTML e JavaScript:

<form>
    <label for="cpf">CPF:</label>
    <input type="text" id="cpf" maxlength="14" oninput="mascaraCPF(this)" placeholder="000.000.000-00" />
</form>

<script>
function mascaraCPF(input) {
    const valor = input.value.replace(/\D/g, '');  // Remove caracteres não numéricos
    input.value = valor.replace(/(\d{3})(\d)/, '$1.$2')  // Adiciona o primeiro ponto
                       .replace(/(\d{6})(\d)/, '$1.$2')  // Adiciona o segundo ponto
                       .replace(/(\d{9})(\d)/, '$1-$2'); // Adiciona o hífen
}
</script>

Explicação:

• Usamos replace() para adicionar os pontos após o terceiro e o sexto dígito.
  
  
• O hífen é inserido automaticamente após o nono dígito.

5. Generalizando a função de máscara

Para evitar duplicação de código, podemos generalizar a função de máscara. Vamos criar uma função que aplica o formato com base em um padrão que passamos como argumento.

Função generalizada:

<form>
    <label for="cep">CEP:</label>
    <input type="text" id="cep" maxlength="9" oninput="aplicarMascara(this, '#####-###')" placeholder="00000-000" />

    <label for="rg">RG:</label>
    <input type="text" id="rg" maxlength="12" oninput="aplicarMascara(this, '##.###.###-#')" placeholder="00.000.000-0" />

    <label for="cpf">CPF:</label>
    <input type="text" id="cpf" maxlength="14" oninput="aplicarMascara(this, '###.###.###-##')" placeholder="000.000.000-00" />
</form>

<script>
function aplicarMascara(input, mascara) {
    const valor = input.value.replace(/\D/g, '');  // Remove caracteres não numéricos
    let i = 0;
    input.value = mascara.replace(/#/g, () => valor[i++] || '');  // Substitui cada '#' pelo número correspondente
}
</script>

Como funciona:

• A função aplicarMascara() recebe dois argumentos: o campo de entrada e a máscara desejada.
  
  
• O replace(/#/g, ...) substitui cada # na máscara pelos dígitos do valor inserido.
  
  
• Com isso, você pode reutilizar essa função para aplicar diferentes máscaras, como para CEP, RG e CPF, apenas alterando o formato no segundo argumento.

Mais exemplos

CEP:

$(document).ready(function(){
	$("#cep").mask("99.999-999");
  });

Telefone:

$(document).ready(function(){
	$("#telefone").mask("(99)99999-9999");
});

CPF:

$(document).ready(function(){
	$("#cpf").mask("999.999.999-99");
});

RG:

$(document).ready(function(){
	$("#rg").mask("99.999.999-99");
});

Datas:

 $(document).ready(function(){
	$("#data").mask("99/99/9999");
});

É importante que o identificado #var tenha correspondência no input type. No caso abaixo o id=”cpf” corresponde a máscara #cpf:

<input type="text" size="15" maxlength="20" name="cpf" id="cpf">

Aplicar máscaras de entrada em campos como CEP, RG e CPF ajuda a garantir que os usuários forneçam dados no formato correto, evitando erros e facilitando a validação.

Neste post, vimos como implementar máscaras de forma simples com JavaScript puro, manipulando os valores enquanto o usuário digita. Com uma função de máscara generalizada, podemos aplicar formatos variados com eficiência e sem a necessidade de bibliotecas externas.

Dúvidas ou sugestões sobre como criar máscaras para CEP-RG-CPF em JavaScript? Deixem nos comentários! Para mais dicas, acesse o nosso canal no YouTube:
https://youtube.com/criandobits

Tags: mascaras javascript