JAVASCRIPT

Mascaras para campos de formularios com Javascript

02/08/2020JAVASCRIPT

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.

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

function somenteNumeros(evt) {

var charCode = (evt.which) ? evt.which : event.keyCode

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

return false;

return true;

}

A função "somenteNumeros" é executada quando alguma tecla for pressionada dentro do campo input do tipo text (evento "onkeypress"). 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, ele retorna false se a tecla pressionada não for um número.

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

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

function formatarMoeda(campo) {

var v = campo.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,");

campo.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 caractes 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 = campo.value.replace(/D/g,'');

Perceba que quando a função é utilizada no campo do tipo input "text", o parâmetro que é enviado é o "this", o "this" se refere ao próprio campo. Para obter o campo digitado no campo, existe uma propriedade chamada "value". O que a função faz é guardar o conteudo do campo numa variável, depois aplicar as máscaras, e devolver o valor formatado para o campo.

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

Uma máscara para datas:

function formatarData(campo){

var v=campo.value.replace(/D/g,"") 

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

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

    campo.value = v;

}

 

Máscara para CPF

 

function formatarCPF(campo){

   var v=campo.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") 

    campo.value = v;

}

 

Máscara para CEP

 

function formatarCep(campo){

  var v=campo.value.replace(/D/g,"")                

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

  campo.value = v;

}

 

Máscara para Telefone

 

function formatarTelefone(campo){

var v=campo.value.replace(/D/g,"")                 

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

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

    campo.value = v;

}

 

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 método "onBlur" 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.

function formatarTelefone(campo){

var v=campo.value.replace(/D/g,"")                 

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

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

    campo.value = v;

}

 

function validarTelefone(campo){

var texto = campo.value;

var RegExp = /([1-9]d)s9?d{5}-d{4}/;

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

alert('telefone válido');

} else {

alert('telefone inválido');

campo.value = "";

}

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

Outros conteudos que podem ser de seu interesse

Pesquisando CEP usando AJAX
08/02/2017JAVASCRIPT

Pesquisando CEP usando AJAX

Aprenda como usar o JavaScript para melhorar seus formulários!

Saiba mais...
Localizando e substituindo dados com expressões regulares com JavaScript
07/11/2019JAVASCRIPT

Localizando e substituindo dados com expressões regulares com JavaScript

Veja alguns exemplos de como localizar ou atualizar dados com expressões regulares

Saiba mais...

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

MySQL - Referência Rápida

 

SQL Server - Referência Rápida

 

SQL vs Mongo