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.

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;

}

<input name="campo" type="text" />

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;

}

<input name="valor" type="text" />

 

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;

}

<input maxlength="10" name="data" type="text" />

 

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;

}

<input maxlength="14" name="cpf" type="text" />

 

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;

}

<input maxlength="9" name="cep" type="text" />

 

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;

}

<input maxlength="15" name="tel" type="text" />

 

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 = "";

}

<input maxlength="15" name="tel" type="text" />

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

 

Quer conferir mais dicas sobre JavaScript? Clique aqui e veja mais dicas!

Veja outros conteúdos que podem ser de seu interesse