Trabalhando com Mascaras em Java Script

Igor Escobar on Fev 18th 2008

Recentemente, tive problemas com algumas funções já disponíveis na internet para poder facilitar a aplicação de mascaras em campos do tipo string.

Por exemplo: o cliente precisava que no momento que eu fosse digitando a data no formato (00/00/000) o sistema automaticamente, iria colocando as barras "/" para facilitar o preenchimento do campo.

Baseando-se neste ,desenvolvi uma função em JavaScript para aplicar qualquer tipo de mascara que você precisar basta informar o template da mesma:

PLAIN TEXT
  1. /**
  2. * Formata o Campo de acordo com a mascara informada.
  3. * Ex de uso: onkeyup="AplicaMascara('00:00:00', this);".
  4. * @author Igor Escobar (blog@igorescobar.com)
  5. * @param Mascara String que possui a mascara de formatação do campo.
  6. * @param elemento Campo que será formatado de acordo com a mascara, voce pode informar o id direto ou o próprio elemento usando o this.
  7. * @returns {void}
  8. */
  9. function AplicaMascara(Mascara, elemento){
  10.    
  11.     // Seta o elemento
  12.     var elemento = (elemento) ? elemento : document.getElementById(elemento);
  13.     if(!elemento) return false;
  14.    
  15.     // Método que busca um determinado caractere ou string dentro de uma Array
  16.     function in_array( oque, onde ){
  17.             for(var i = 0 ; i <onde.length; i++){
  18.             if(oque == onde[i]){
  19.                 return true;
  20.             }
  21.         }
  22.         return false;
  23.     }
  24.     // Informa o array com todos os caracteres que podem ser considerados caracteres de mascara
  25.     var SpecialChars = [':', '-', '.', '(',')', '/', ',', '_'];
  26.     var oValue = elemento.value;
  27.     var novo_valor = '';
  28.     for( i = 0 ; i <oValue.length; i++){
  29.         //Recebe o caractere de mascara atual
  30.         var nowMask = Mascara.charAt(i);
  31.         //Recebe o caractere do campo atual
  32.         var nowLetter = oValue.charAt(i);
  33.         //Aplica a masca
  34.         if(in_array(nowMask, SpecialChars) == true && nowLetter != nowMask){
  35.             novo_valor +=  nowMask + '' + nowLetter;
  36.         } else {
  37.             novo_valor += nowLetter;
  38.         }
  39.         // Remove regras duplicadas
  40.         var DuplicatedMasks = nowMask+''+nowMask;
  41.         while (novo_valor.indexOf(DuplicatedMasks)>= 0) {
  42.          novo_valor = novo_valor.replace(DuplicatedMasks, nowMask);
  43.         }
  44.     }
  45.     // Retorna o valor do elemento com seu novo valor
  46.     elemento.value = novo_valor;
  47.    
  48. }

Metodos de uso

Mascara para campos do tipo Data:

PLAIN TEXT
  1. <input name="data" maxlength="10" onkeyup="AplicaMascara('XX/XX/XXXX', this);" type="text" />

Mascara para campos do tipo Hora:

PLAIN TEXT
  1. <input name="hora" maxlength="8" onkeyup="AplicaMascara('XX:XX:XX', this);" type="text" />

Mascara para campos do tipo CEP:

PLAIN TEXT
  1. <input name="cep" onkeyup="AplicaMascara('XXXX-XXX', this);" type="text" />

Mascara para campos do tipo TELEFONE:

PLAIN TEXT
  1. <input name="tel" onkeyup="AplicaMascara('(XX)XXXX-XXXX', this);" type="text" />

Mascara para campos do tipo CPF:

PLAIN TEXT
  1. <input name="cpf" onkeyup="AplicaMascara('XXX.XXX.XXX-XX', this);" type="text" />

E por ai vai, basta seguir os exemplos e ser feliz ;)Espero ter contribuído!
[]'s

Leia também:

Mootools Extension: moo.rd on February 21st, 2008
.

Filed in Java Script, Utilidades | 3 responses so far

3 Responses to “Trabalhando com Mascaras em Java Script”

  1. JulioGreff Fev 18th 2008 at 10:36 pm 1

    Hmmm, muito boa a idéia. Só tinha visto scripts assim pra uma máscara específica. Lembro que no Access eu fazia assim.
    Parabéns!

  2. » Trabalhando com Mascaras em Java Script - Final | Igor Escobar // Blog | Desenvolvimento, Tecnologia e Informação, na ponta do lápis. Fev 20th 2008 at 07:59 pm 2

    [...] isso, essa implementação foi feita devido aos problemas apresentados pela implementação anterior que apresentou problemas em relação a precisão do auto-tab, fazendo com que o campo mudasse de [...]

  3. Eduardo Jul 17th 2008 at 01:05 pm 3

    Excelente idéia. Há um problema com o código que ocorre se a pessoa digitar mais do que o tamanho esperado.

    Digamos que para a máscara “(XX)XXXX-XXXX” o usuário vá digitando e ela fique (XX)XXXX-XXXXYY, o código entra em loop infinito e trava o browser (teste feito no Firefox 2.0.0.12) no seguinte trecho:

    while (novo_valor.indexOf(DuplicatedMasks)>= 0) {
    novo_valor = novo_valor.replace(DuplicatedMasks, nowMask);
    }

    Abraz, Eduardo.

Trackback URI | Comments RSS

Leave a Reply