Mãozinha da Web: Máscara genérica para campos numéricos em Javascript

Olá pessoal, tudo bem? Neste tutorial vamos implementar uma máscara genérica para campos numéricos usando Javascript. A função aceita como parâmetro uma string correspondente ao padrão do campo, podendo ser utilizada como máscara de CPF, máscara de CNPJ, máscara de data e hora, de telefone, etc. Para a string do padrão, será utilizado o caracter '#' para identificar um dígito. Dessa forma, para uma máscara de CPF, o padrão fornecido como parâmetro será "###.###.###-##". No código, fornecemos já alguns exemplos da aplicação da máscara genérica. Este é um exemplo para fins didáticos. Fique à vontade para apontar melhorias e correções. Bons estudos!

 <html>  
 <head>  
 <title>Mascara genérica para campos numéricos</title>  
 <script language="JavaScript" type="text/javascript">  
      function mascaraGenerica(evt, campo, padrao) {  
           //testa a tecla pressionada pelo usuario  
           var charCode = (evt.which) ? evt.which : evt.keyCode;  
           if (charCode == 8) return true; //tecla backspace permitida  
           if (charCode != 46 && (charCode < 48 || charCode > 57)) return false; //apenas numeros            
           campo.maxLength = padrao.length; //Define dinamicamente o tamanho maximo do campo de acordo com o padrao fornecido  
           //aplica a mascara de acordo com o padrao fornecido  
           entrada = campo.value;  
           if (padrao.length > entrada.length && padrao.charAt(entrada.length) != '#') {  
                campo.value = entrada + padrao.charAt(entrada.length);                 
           }  
           return true;  
      }  
 </script>  
 </head>  
 <body>  
 <h2>Máscara genérica para campos numéricos</h2>  
 <form>  
  Mascara de CPF: <input type="text" name="data" OnKeyPress="return mascaraGenerica(event, this, '###.###.###-##');" / >  
 </form>  
 <form>  
  Mascara de CNPJ: <input type="text" name="data" OnKeyPress="return mascaraGenerica(event, this, '##.###.###/####-##');" / >  
 </form>  
 <form>  
  Mascara de Hora: <input type="text" name="data" OnKeyPress="return mascaraGenerica(event, this, '##:##:##');" / >  
 </form>  
 <form>  
  Mascara de Telefone: <input type="text" name="data" OnKeyPress="return mascaraGenerica(event, this, '+## ## ####-####');" / >  
 </form>  
 </body>  
 </html>

Mãozinha da Web

quinta-feira, janeiro 02, 2014

Máscara genérica para campos numéricos em Javascript

Um comentário: