Máscara javascript para qualquer formato

Samuel Martins Delfim 19 de dezembro de 2008 1
Fazer máscaras em javascript é sempre chato e trabalhoso. Para cada máscara do sistema deve-se criar uma função javascript e utilizá-la no sistema. A algum tempo criei uma função javascript que funciona para a grande maioria das mascaras que são utilizadas no sistema. A função é mostrada abaixo:
/**
* Funcao de mascara. Esta funcao recebe como parametro o campo (this) no qual a
* mascara sera aplicada, o formato da mascara (99/99/9999), o conteúdo (1
* numeros, 2 letras e 3 letras e numeros) e o evento passa-se o this.
*/
function mask(campo, formato, conteudo, event) {

 valor = campo.value;

 var i, j;
 var caracs = [ '.', '/', '-', ':', '(', ')', ',' ];
 var auxPonto = formato;
 var auxBarra = formato;
 var auxHifen = formato;
 var auxDblPonto = formato;
 var auxAbrePar = formato;
 var auxFechaPar = formato;
 var auxVirgula = formato;
 var tamanho = formato.length;
 var posPonto = new Array(tamanho);
 var posBarra = new Array(tamanho);
 var posHifen = new Array(tamanho);
 var posDblPonto = new Array(tamanho);
 var posAbrePar = new Array(tamanho);
 var posFechaPar = new Array(tamanho);
 var posVirgula = new Array(tamanho);
 var keyPress = event;

 campo.maxLength = tamanho;

 if (event.keyCode != 17) {
  switch (conteudo) {
  case 1: // Verifica se soh podem ser entrados valores numericos
   if (!(event.keyCode >= 48 && (event.keyCode <= 57)))
    event.keyCode = 0;
   break;
  case 2: // Somente Letras
   if (!((event.keyCode >= 97 && event.keyCode <= 122)
     || event.keyCode >= 65
     && event.keyCode <= 90))
    event.keyCode = 0;
   break;
  case 3: // Letras e numeros
   if (!((event.keyCode >= 48 && event.keyCode <= 57)
     || (event.keyCode >= 97 && event.keyCode <= 122)
     || (event.keyCode >= 65 && event.keyCode <= 90)))
    event.keyCode = 0;
   break;
  }
 }

 // ----------------------------- PEGA A FORMATACAO DA MASCARA
 // ------------------
 for (i = 0; i < tamanho; i++) {

  posPonto[i] = auxPonto.indexOf('.');
  posBarra[i] = auxBarra.indexOf('/');
  posHifen[i] = auxHifen.indexOf('-');
  posDblPonto[i] = auxDblPonto.indexOf(':');
  posAbrePar[i] = auxAbrePar.indexOf('(');
  posFechaPar[i] = auxFechaPar.indexOf(')');
  posVirgula[i] = auxVirgula.indexOf(',');

  auxPonto = auxPonto.substring(posPonto[i] + 1, tamanho);
  auxBarra = auxBarra.substring(posBarra[i] + 1, tamanho);
  auxHifen = auxHifen.substring(posHifen[i] + 1, tamanho);
  auxDblPonto = auxDblPonto.substring(posDblPonto[i] + 1, tamanho);
  auxAbrePar = auxAbrePar.substring(posAbrePar[i] + 1, tamanho);
  auxFechaPar = auxFechaPar.substring(posFechaPar[i] + 1, tamanho);
  auxVirgula = auxVirgula.substring(posVirgula[i] + 1, tamanho);

  if (i > 0) {
   posPonto[i] = posPonto[i] + posPonto[i - 1];
   posBarra[i] = posBarra[i] + posBarra[i - 1];
   posHifen[i] = posHifen[i] + posHifen[i - 1];
   posDblPonto[i] = posDblPonto[i] + posDblPonto[i - 1];
   posAbrePar[i] = posAbrePar[i] + posAbrePar[i - 1];
   posFechaPar[i] = posFechaPar[i] + posFechaPar[i - 1];
   posVirgula[i] = posVirgula[i] + posVirgula[i - 1];
   posPonto[i] = posPonto[i] + 1;
   posBarra[i] = posBarra[i] + 1;
   posHifen[i] = posHifen[i] + 1;
   posDblPonto[i] = posDblPonto[i] + 1;
   posAbrePar[i] = posAbrePar[i] + 1;
   posFechaPar[i] = posFechaPar[i] + 1;
   posVirgula[i] = posVirgula[i] + 1;
  }
 }

 // Retirando a máscara
 for (i = 0; i < campo.value.length; i++) {
  valor = valor.replace('-', '');
  valor = valor.replace('(', '');
  valor = valor.replace(')', '');
  valor = valor.replace(':', '');
  valor = valor.replace('/', '');
  valor = valor.replace('.', '');
  valor = valor.replace(',', '');
 }

 // Faz a validação se for apenas número
 // utilizado para fazer a validação de Ctrl+V
 if (conteudo == 1) {
  if (isNaN(valor)) {
   if (isNaN(valor.charAt(valor.length - 2)))
    valor = "";
   else
    valor = valor.substring(0, valor.length - 1);
  }
 }

 indicePonto = 0;
 indiceBarra = 0;
 indiceHifen = 0;
 indiceDblPonto = 0;
 indiceVirgula = 0;
 indiceAbrePar = 0;
 indiceFechaPar = 0;

 // Varre o campo aplicando a máscara
 for (i = 0; i < valor.length; i++) {
  if (i == posPonto[indicePonto]) {
   if (valor.charAt(i) != '.') {
    if (i == 0) {
     valor = '.' + valor;
    } else if (i == valor.length) {
     valor = valor + '.';
    } else {
     valor = valor.substring(0, i) + '.' + valor.substring(i);
    }
    indicePonto++;
   }
  }
  if (i == posBarra[indiceBarra]) {
   if (valor.charAt(i) != '/') {
    if (i == 0) {
     valor = '/' + valor;
    } else if (i == valor.length) {
     valor = valor + '/';
    } else {
     valor = valor.substring(0, i) + '/' + valor.substring(i);
    }
    indiceBarra++;
   }
  }

  if (i == posHifen[indiceHifen]) {
   if (valor.charAt(i) != '-') {
    if (i == 0) {
     valor = '-' + valor;
    } else if (i == valor.length) {
     valor = valor + '-';
    } else {
     valor = valor.substring(0, i) + '-' + valor.substring(i);
    }
    indiceHifen++;
   }
  }

  if (i == posDblPonto[indiceDblPonto]) {
   if (valor.charAt(i) != ':') {
    if (i == 0) {
     valor = ':' + valor;
    } else if (i == valor.length) {
     valor = valor + ':';
    } else {
     valor = valor.substring(0, i) + ':' + valor.substring(i);
    }
    indiceDblPonto++;
   }
  }

  if (i == posAbrePar[indiceAbrePar]) {
   if (valor.charAt(i) != '(') {
    if (i == 0) {
     valor = '(' + valor;
    } else if (i == valor.length) {
     valor = valor + '(';
    } else {
     valor = valor.substring(0, i) + '(' + valor.substring(i);
    }
    indiceAbrePar++;
   }
  }

  if (i == posFechaPar[indiceFechaPar]) {
   if (valor.charAt(i) != ')') {
    if (i == 0) {
     valor = ')' + valor;
    } else if (i == valor.length) {
     valor = valor + ')';
    } else {
     valor = valor.substring(0, i) + ')' + valor.substring(i);
    }
    indiceFechaPar++;
   }
  }

  if (i == posVirgula[indiceVirgula]) {
   if (valor.charAt(i) != ',') {
    if (i == 0) {
     valor = ',' + valor;
    } else if (i == valor.length) {
     valor = valor + ',';
    } else {
     valor = valor.substring(0, i) + ',' + valor.substring(i);
    }
    indiceVirgula++;
   }
  }
 }

 if (campo.value.length > tamanho) {
  campo.value = campo.value.substring(0, tamanho);
 }

 campo.value = valor;
}

Segue abaixo um exemplo de como utilizar a função:


Para a máscara pode se passar qualquer mascara que possua os caracteres (ponto, barra, menos, dois pontos, virgula, e abre e fecha parenteses. Os valores que são passados entre os caracteres acima serão desconsiderados, então tanto faz colocar 999.999.999-99 quanto 111.111.111-11. Espero que esta máscara ajude vcs assim como vem me ajudando durante este longo período de desenvolvimento.

É isto aí pessoal. Qualquer problema mandem mensagem.

Um comentário »

  1. Lucas 3 de abril de 2013 de 9:17 am - Reply

    E no caso da máscara de telefone como fica ?
    (99) 9999-9999, a função não reconhece o espaço entre o ultimo parenteses e o primeiro digito do telefone. Há algum modo de corrigir isto ?
    Abs.

Deixe uma resposta »