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
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 preventDefault, isso 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://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
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