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

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

Calculando a idade com JavaScript
27/10/2019JAVASCRIPT

Calculando a idade com JavaScript

Um exemplo de como calcular a idade usando JS

Saiba mais...
Monitorando arquivos com NodeJS
15/12/2019JAVASCRIPT

Monitorando arquivos com NodeJS

Veja como controlar alterações de arquivos numa pasta utilizando NodeJS

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