quarta-feira, 2 de outubro de 2002

Formatação de dados em formulários HTML

Postado por Rubens Farias às 11:09


<html>
<head>
<title> Textbox formatado... </title>
  <script language="JavaScript">
    /***
    * Descrição.: formata um campo do formulário de
    * acordo com a máscara informada...
    * Parâmetros: - objForm (o Objeto Form)
    * - strField (string contendo o nome
    * do textbox)
    * - sMask (mascara que define o
    * formato que o dado será apresentado,
    * usando o algarismo "9" para
    * definir números e o símbolo "!" para
    * qualquer caracter...
    * - evtKeyPress (evento)
    *
    * Uso.......: <input type="textbox"
    * name="xxx".....
    * onkeypress="return txtBoxFormat(document.rcfDownload, 'str_cep', '99999-999', event);">
    * Observação: As máscaras podem ser representadas
    * como os exemplos abaixo:
    * CEP -> 99999-999
    * CPF -> 999.999.999-99
    * CNPJ -> 99.999.999/9999-99
    * C/C -> 999999-!
    * Tel -> (99) 9999-9999
    ***/
    function txtBoxFormat(objForm, strField, sMask, evtKeyPress) {
      var i, nCount, sValue, fldLen, mskLen,bolMask, sCod, nTecla;

      if(document.all) { // Internet Explorer
        nTecla = evtKeyPress.keyCode; }
      else if(document.layers) { // Nestcape
        nTecla = evtKeyPress.which;
      }

      sValue = objForm[strField].value;

      // Limpa todos os caracteres de formatação que
      // já estiverem no campo.
      sValue = sValue.toString().replace( "-", "" );
      sValue = sValue.toString().replace( "-", "" );
      sValue = sValue.toString().replace( ".", "" );
      sValue = sValue.toString().replace( ".", "" );
      sValue = sValue.toString().replace( "/", "" );
      sValue = sValue.toString().replace( "/", "" );
      sValue = sValue.toString().replace( "(", "" );
      sValue = sValue.toString().replace( "(", "" );
      sValue = sValue.toString().replace( ")", "" );
      sValue = sValue.toString().replace( ")", "" );
      sValue = sValue.toString().replace( " ", "" );
      sValue = sValue.toString().replace( " ", "" );
      fldLen = sValue.length;
      mskLen = sMask.length;

      i = 0;
      nCount = 0;
      sCod = "";
      mskLen = fldLen;

      while (i <= mskLen) {
        bolMask = ((sMask.charAt(i) == "-") || (sMask.charAt(i) == ".") || (sMask.charAt(i) == "/"))
        bolMask = bolMask || ((sMask.charAt(i) == "(") || (sMask.charAt(i) == ")") || (sMask.charAt(i) == " "))

        if (bolMask) {
          sCod += sMask.charAt(i);
          mskLen++; }
        else {
          sCod += sValue.charAt(nCount);
          nCount++;
        }

        i++;
      }

      objForm[strField].value = sCod;

      if (nTecla != 8) { // backspace
        if (sMask.charAt(i-1) == "9") { // apenas números...
          return ((nTecla > 47) && (nTecla < 58)); } // números de 0 a 9
        else { // qualquer caracter...
          return true;
        } }
      else {
        return true;
      }
    }
  </script>
</head>
<body>
<form name="myForm">
<table border="0" cellspacing="2" cellpadding="2">
  <tr>
    <td>cep &nbsp;</td>
    <td>
      <input type="text"
             name="str_cep"
             maxlength="09"
             size="10"
             onkeypress="return txtBoxFormat(document.myForm, 'str_cep', '99999-999', event);">
    </td>
  </tr>
  <tr>
    <td>cpf &nbsp;</td>
    <td>
      <input type="text"
             name="str_cpf"
             maxlength="14"
             size="20"
             onkeypress="return txtBoxFormat(document.myForm, 'str_cpf', '999.999.999-99', event);">
    </td>
  </tr>
  <tr>
    <td>tel &nbsp;</td>
    <td>
      <input type="text"
             name="str_tel"
             maxlength="14"
             size="20"
             onkeypress="return txtBoxFormat(document.myForm, 'str_tel', '(99) 9999-9999', event);">
    </td>
  </tr>
  <tr>
  <td>conta &nbsp;</td>
  <td>
    <input type="text"
           name="str_cc"
           maxlength="6"
           size="10"
           onkeypress="return txtBoxFormat(document.myForm, 'str_cc', '9999-!', event);">
    </td>
  </tr>
</table>
</form>
</body>
</html>



Esta matéria foi postada originalmente no ASP4Developers por Douglas da Cunha Coelho Sobrinho (site), que na época era ""Webmaster" do Corpo de Bombeiros Militar do Espírito Santo, Programador-aprendiz autodidata ASP e VB, JavaScript e Clipper (Pasmem!).". Hoje, vai saber...

 

Marcadores:

0 comentários:

Postar um comentário

Assinar: Postar comentários (Atom)