Trabalhando com Mascaras em Java Script - Final

Igor Escobar on Fev 20th 2008

Esta implementação eu criei para os programadores que utilizam alguma função que faz o auto-tab automático entre os campos.

PLAIN TEXT
  1. /**
  2. * Formata o Campo de acordo com a mascara informada.
  3. * Ex de uso: onkeyup="AplicaMascara('HORA', this);".
  4. * @author Igor Escobar (blog@igorescobar.com)
  5. * @param Mascara String que possui o nome da 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. * @methods
  9.    - DATA:
  10.    - HORA:
  11.    - CEP:
  12.    - CPF:
  13.    - CNPJ
  14.    - TEL
  15.    - TELDDD
  16. */
  17. function AplicaMascara(Mascara, elemento)
  18. {
  19.        
  20.     // Seta o elemento
  21.     var elemento = (elemento) ? elemento : document.getElementById(elemento);
  22.     if(!elemento) return false;
  23.    
  24.     // DEFINE AS REGRAS DE FORMATAÇÃO DOS CAMPOS
  25.     var Regexs = {
  26.         DATA: /(([0-9]){2})(([0-9]){2})(([0-9]){4})/,
  27.         HORA: /(([0-9]{2}))(([0-9]){2})(([0-9]){2})/,
  28.         CEP: /(([0-9]{5}))(([0-9]){3})/,
  29.         CPF: /(([0-9]{3}))(([0-9]){3})(([0-9]){3})(([0-9]){2})/,
  30.         CNPJ: /(([0-9]{2}))(([0-9]){3})(([0-9]){3})(([0-9]){4})(([0-9]){2})/,
  31.         TEL: /(([0-9]){4})(([0-9]){4})/,
  32.         TELDDD: /(([0-9]){2})(([0-9]){4})(([0-9]){4})/
  33.     }
  34.     MyRegex = eval('Regexs.'+Mascara);
  35.    
  36.     // INSTANCIA A REGRA REGEX PARA FORMATACAO
  37.     getRegexGroups = new RegExp(MyRegex);
  38.    
  39.     // INSTANCIA A REGRA QUE VERIFICA SE O CAMPO POSSUI SOMENTE NÚMEROS
  40.     onlyNumbers = new RegExp(/^([0-9]+)$/);
  41.    
  42.     // ESTE É O CAMPO COM AS IMPURESAS (DIGITADO PELO USUÁRIO FINAL)
  43.     var CampoSujo = elemento.value;
  44.    
  45.     // RETIRA OS EXCESSOS DOS CAMPOS PARA QUE POSSAMOS APLICAR A MASCARA EM UM CAMPO LIMPO
  46.     var oValue = CampoSujo.replace(/([./;:,\-()]+)/g,"");
  47.    
  48.     // VERIFICA SE A REGRA QUE ELE SE ESCOLHEU SE APLICA AO TEXTO DIGITADO NO CAMPO
  49.     if(getRegexGroups.test(oValue) == true){
  50.         //APLICA A REGRA NO CAMPO E FORMATA
  51.         switch(Mascara){
  52.             case 'DATA': oNewCampo = oValue.replace(getRegexGroups,"$1/$3/$5"); break;
  53.             case 'HORA': oNewCampo = oValue.replace(getRegexGroups,"$1:$3:$5"); break;
  54.             case 'CEP': oNewCampo = oValue.replace(getRegexGroups,"$1$3-$5"); break;
  55.             case 'CPF': oNewCampo = oValue.replace(getRegexGroups,"$1.$3.$5-$7"); break;
  56.             case 'CNPJ': oNewCampo = oValue.replace(getRegexGroups,"$1.$3.$5/$7-$9"); break;
  57.             case 'TEL': oNewCampo = oValue.replace(getRegexGroups,"$1-$3"); break;
  58.             case 'TELDDD': oNewCampo = oValue.replace(getRegexGroups,"($1)$3-$5"); break;
  59.         }
  60.         // Retorna o valor do elemento com seu novo valor
  61.         elemento.value = oNewCampo; 
  62.     }
  63. }

Observe que nos comentários do código possui as mascaras suportadas pela função. Se você precisar de alguma especifica, basta comentar este post detalhando a regra e eu retorno o comentário com a regra Regex para você agregar ao seu objeto.

Como Usar?

Exemplo:

PLAIN TEXT
  1. <input name="data" onkeypress="AplicaMascara('DATA',this);" type="text" />

That's it!

A função AplicaMascara(); possui 2 parametros:

  • Nome da mascara que você quer aplicar
  • Objeto que será manipulado pela função JavaScript

É 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 foco antes do usuário terminar de digitar a data com a mascara por completo.

Espero ter contribuído!
[]'s

Leia também:

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

Filed in Java Script, Utilidades | One response so far

One Response to “Trabalhando com Mascaras em Java Script - Final”

  1. Thalles Mai 11th 2008 at 12:47 am 1

    Cara, eu encontrei um bug no seu script, na linha:

    case ‘CEP’: oNewCampo = oValue.replace(getRegexGroups,”$1$3-$5″); break;

    Eu corrigi para:

    case ‘CEP’: oNewCampo = oValue.replace(getRegexGroups,”$1-$3″); break;

    Valeu Cara, ótimo script. ;)

Trackback URI | Comments RSS

Leave a Reply