Mascaras para campos de formularios com Javascript

Mascaras para campos de formularios com Javascript

Neste artigo você vai aprender como criar máscaras para campos de formulários utilizando Javascript. Os exemplos não utilizam nenhum framework, vamos trabalhar apenas com Javascript puro.

Neste artigo você vai ver os seguintes exemplos:

* Máscara que aceite apenas números

* Máscara para valores de moeda

* Máscara para datas

* Máscara para CPF

* Máscara para CNPJ

* Máscara para CEP

* Máscara para Telefone

* Limpar o campo se o formato estiver incorreto

 

Para todos os exemplos, nós vamos adicionar um listener no final da página para o nosso campo do formulário. Em nosso exemplo, vamos ter um HTML com um input do tipo text com um "id" chamado "campo". Para não haver dúvidas, você poderá ver todos estes exemplos funcionando no link a seguir

Link exemplos máscaras 

 

Máscara que aceite apenas números

Neste primeiro exemplo, vamos ver como criar um campo que aceite apenas números:

const input = document.getElementById("campo");

input.addEventListener("keypress", somenteNumeros);

function somenteNumeros(e) {

var charCode = (e.which) ? e.which : e.keyCode

if (charCode > 31 && (charCode < 48 || charCode > 57))

e.preventDefault();

 }

 

A função "somenteNumeros" é executada quando alguma tecla for pressionada dentro do campo input do tipo text (evento "keypress"). Ela determina qual o código da tecla que foi pressionada, para isso, a variável "charCode" lê a propriedade "which" ou "keyCode" do evento que foi acionado pelas funções keydown, keypress, or keyup. De acordo com o código da tecla pressionada, se ela não for referente a um número, ele executa preventDefaultisso impede que o caractere digitado seja mantido dentro do input 

Se você quiser saber qual o código numérico de cada tecla, pode consultar os seguintes sites:

https://keycode.info

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode

 

Máscara para valores de moeda

O segundo exemplo vai mostrar como criar uma máscara para valores em moeda

const input = document.getElementById("campo");

input.addEventListener("keyup", formatarMoeda); 

function formatarMoeda(e) {

var v = e.target.value.replace(/\D/g,"");

v = (v/100).toFixed(2) + "";

v = v.replace(".", ",");

v = v.replace(/(\d)(\d{3})(\d{3}),/g, "$1.$2.$3,");

v = v.replace(/(\d)(\d{3}),/g, "$1.$2,");

e.target.value = v;

}

A funçao "formatarMoeda" será executada ao soltar a tecla depois de digitar (evento "keyup"). Utilizando expressões regulares, ela remove espaços e letras, e faz a formatação do número digitado, retornando o valor formatado.

Para remover os caracteres que não são números, no começo da função, foi utilizado o método "replace", informando que tudo o que não é dígito deve ser substituído por espaço.

var v = e.target.value.replace(/\D/g,"");

Perceba que quando a função é utilizada ela recebe um parâmetro chamado  "e". O campo que executou o evento keyup pode ser obtido por e.target. Para obter o valor digitado neste campo, existe uma propriedade chamada "value" (e.target.value). O que esta função faz é guardar o conteudo do campo numa variável. Na sequência se aplica as máscaras ao valor digitado e ao concluir se devolve o valor formatado para o campo que disparou o evento keyup.

Seguindo o mesmo conceito aplicado na máscara de valores, podemos criar outras máscaras. A seguir vamos ver outros exemplos:

 

Máscara para datas

const input = document.getElementById("campo");

input.addEventListener("keyup", formatarData);

function formatarData(e){

var v=e.target.value.replace(/\D/g,"");

v=v.replace(/(\d{2})(\d)/,"$1/$2") 

v=v.replace(/(\d{2})(\d)/,"$1/$2") 

e.target.value = v;

}

 

Máscara para CPF

 

const input = document.getElementById("campo");

input.addEventListener("keyup", formatarCPF);

function formatarCPF(e){

var v=e.target.value.replace(/\D/g,"");

v=v.replace(/(\d{3})(\d)/,"$1.$2");

v=v.replace(/(\d{3})(\d)/,"$1.$2");

v=v.replace(/(\d{3})(\d{1,2})$/,"$1-$2");

e.target.value = v;

} 

 

Máscara para CNPJ

 

const input = document.getElementById("campo");

input.addEventListener("keyup", formatarCNPJ);

function formatarCNPJ(e){

var v= e.target.value.replace(/\D/g,"");

v=v.replace(/^(\d{2})(\d)/,"$1.$2");

v=v.replace(/^(\d{2})\.(\d{3})(\d)/,"$1.$2.$3");

v=v.replace(/\.(\d{3})(\d)/,".$1/$2");

v=v.replace(/(\d{4})(\d)/,"$1-$2");  

e.target.value = v;

 

}

 

Máscara para CEP

 

const input = document.getElementById("campo");

input.addEventListener("keyup", formatarCep);

function formatarCep(e){

var v= e.target.value.replace(/\D/g,"")                

v=v.replace(/^(\d{5})(\d)/,"$1-$2") 

e.target.value = v;

}

 

 

Máscara para Telefone

 

const input = document.getElementById("campo");

input.addEventListener("keyup", formatarTelefone);

function formatarTelefone(e){

var v=e.target.value.replace(/\D/g,"");

v=v.replace(/^(\d\d)(\d)/g,"($1)$2"); 

v=v.replace(/(\d{5})(\d)/,"$1-$2");    

e.target.value = v;

 

}

 

 

Limpar o campo se o formato estiver incorreto

Em todos os exemplos, a formatação é aplicada durante a digitação. Mas, se você sair do campo sem completar todos os dígitos, o campo vai continuar preenchido. O ideal seria limpar o campo ao sair se o formato estiver incorreto. 

Para isso, é necessário utilizar o evento "Blur" e executar uma função que verifique se o conteúdo está correto. Caso esteja inválido, limpar.

Um exemplo de como seria esta validação, com base no último exemplo, que foi a máscara de telefone.

const input = document.getElementById("campo");

input.addEventListener("keyup", formatarTelefone);

input.addEventListener("blur", validarTelefone); 

function formatarTelefone(e){

var v=e.target.value.replace(/\D/g,"");

v=v.replace(/^(\d\d)(\d)/g,"($1)$2"); 

v=v.replace(/(\d{5})(\d)/,"$1-$2");    

e.target.value = v;

}

function validarTelefone(e){

var texto = e.target.value;

var RegExp = /^\(\d{2}\)\d{5}-\d{4}/;

if (texto.match(RegExp) != null) {

alert("telefone válido");

} else {

alert("telefone inválido");

e.target.value = "";

}

}

 

Na função ValidarTelefone, que vai ser executada após o foco sair do campo texto, validamos se o conteúdo do campo é igual a uma expressão regular com o formato de nossa máscara de telefone, que é (xx)xxxxx-xxxx.

 

Encerramento

Neste artivo você viu como aplicar máscaras para campos de formulários com JavaScript.

Se você se interessou por máscaras para campos, tenho certeza que tem interesse em outros assuntos relacionados a formulários. Os artigos a seguir tratam de outros tipos de validação de formulários

Validar senhas com Javascript

Upload de arquivos com validação em javascript

Como você percebeu, as expressões regulares ajudam bastante na hora de criar máscaras. Caso você queira aprender mais sobre expressões regulares, pode consultar outros artigos semelhantes, dentro deste blog. 

Remover acentos e caracteres especiais com JavaScript

Localizando e substituindo dados com expressões regulares com JavaScript

 

Está começando e deseja saber o que precisa estudar de HTML e JavaScript? Não deixe de conferir os roteiros de estudo de HTML e JavaScript!. São dezenas de conteúdos para você melhorar suas habilidades.

Roteiro de estudos - HTML e CSS

Roteiro de estudos - Javascript

 

Outros conteudos que podem ser de seu interesse

Compiladores online
15/05/2022JAVASCRIPT

Compiladores online

Rode seu código direto do navegador

Saiba mais...
Plataformas para trabalho freelancer
02/08/2020JAVASCRIPT

Plataformas para trabalho freelancer

Descubra algumas das mais populares plataformas para trabalho freelancer

Saiba mais...

Conteúdo sobre banco de dados sem complicação!