Jump to content


Photo

Mascara De Entrada

Started By Cristiano Galdino, 27/06/2003, 14:13

  • Faça o login para participar
61 replies to this topic

#1 Cristiano Galdino

Cristiano Galdino

    Dark Defender

  • Administradores
  • 3738 posts
  • Sexo:Masculino
  • Localidade:Brasília, DF

Posted 27/06/2003, 14:13

Pra vcs aprenderem a trabalhar com mascara de entrada...


<html> 
<head> 
<title>Máscaras para Formulários</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 -> 99.999-999 
* CPF -> 999.999.999-99 
* CNPJ -> 99.999.999/9999-99 
* Data -> 99/99/9999 
* Tel Resid -> (99) 999-9999 
* Tel Cel -> (99) 9999-9999 
* Processo -> 99.999999999/999-99 
* C/C -> 999999-! 
* E por aí vai... 
***/

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;
      }
    }
//Fim da Função Máscaras Gerais
</script>
</head> 
<body> 
<font size="2" face="Verdana, Arial, Helvetica, sans-serif"><strong>Formatação 
de várias Máscaras de Entradas para campos de Formulários</strong></font> 
<form name="Form"> 
<table border="0" cellspacing="2" cellpadding="2"> 
<tr> 
<td width="66"><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Cep 
&nbsp;</font></td> 
<td width="128"> <input type="text" 
name="str_cep" 
maxlength="10" 
size="10" 
onkeypress="return txtBoxFormat(document.Form, 'str_cep', '99.999-999', event);"> 
</td> 
</tr> 
<tr> 
<td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Cpf &nbsp;</font></td> 
<td> <input type="text" 
name="str_cpf" 
maxlength="14" 
size="14" 
onkeypress="return txtBoxFormat(document.Form, 'str_cpf', '999.999.999-99', event);"> 
</td> 
</tr> 
<tr> 
<td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Cnpj</font></td> 
<td><input type="text" 
name="str_cnpj" 
maxlength="18" 
size="18" 
onkeypress="return txtBoxFormat(document.Form, 'str_cnpj', '99.999.999/9999-99', event);"></td> 
</tr> 
<tr> 
<td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Data</font></td> 
<td><input type="text" 
name="str_data" 
maxlength="10" 
size="10" 
onkeypress="return txtBoxFormat(document.Form, 'str_data', '99/99/9999', event);"></td> 
</tr> 
<tr> 
<td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Tel Resid</font></td> 
<td><input type="text" 
name="str_tel2" 
maxlength="13" 
size="13" 
onkeypress="return txtBoxFormat(document.Form, 'str_tel2', '(99) 999-9999', event);"></td> 
</tr> 
<tr> 
<td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Tel Cel&nbsp;</font></td> 
<td> <input type="text" 
name="str_tel" 
maxlength="14" 
size="14" 
onkeypress="return txtBoxFormat(document.Form, 'str_tel', '(99) 9999-9999', event);"> 
</td> 
</tr> 
<tr> 
<td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Processo</font></td> 
<td><input type="text" 
name="str_proc" 
maxlength="20" 
size="20" 
onkeypress="return txtBoxFormat(document.Form, 'str_proc', '99.999999999/9999-99', event);"></td> 
</tr> 
<tr> 
<td><font size="2" face="Verdana, Arial, Helvetica, sans-serif">Conta &nbsp;</font></td> 
<td> <input type="text" 
name="str_cc" 
maxlength="6" 
size="10" 
onkeypress="return txtBoxFormat(document.Form, 'str_cc', '9999-!', event);"> 
</td> 
</tr> 
</table> 
</form> 
</body> 
</html>

Cristiano Galdino
- http://cristiano.galdino.net/

“Since 2003”

#2 crazybaby

crazybaby

    Cyber Eye

  • Banidos
  • PipPipPipPipPipPipPipPipPip
  • 1112 posts
  • Sexo:Não informado
  • Localidade:Divinopolis-MG
  • Interesses:ASP &amp; Design

Posted 27/06/2003, 15:27

mas pra q serve as mascaras de entradas
asp é melhor naum é?!!!!
Está com duvida? | Tchau | Entre | Você é visitante?

Regras do Fórum | Warn System

#3 Cristiano Galdino

Cristiano Galdino

    Dark Defender

  • Administradores
  • 3738 posts
  • Sexo:Masculino
  • Localidade:Brasília, DF

Posted 28/06/2003, 01:04

Depende, eu nunca soube que ASP trabalhava com mascara de entrada... Isso é pra quando vc for preencher um campo ele se "auto-completar", e é uma forma de validar data, cpf, telefone...
Cristiano Galdino
- http://cristiano.galdino.net/

“Since 2003”

#4 COWBOY_4ever

COWBOY_4ever

    Rodeio Universitário

  • Usuários
  • 483 posts
  • Sexo:Masculino
  • Localidade:Estado do Rio de Janeiro
  • Interesses:Mulheres, dinheiro e bebidas.

Posted 28/06/2003, 01:54

É isso aí Cristiano.... Muito útil esse script. :ok:
| COWBOY_4ever
|
| ====================================
| Cavalo eu puxo no toco, burro eu puxo no morão.
| Gosto de whisky, mas a cerveja é minha paixão.
| Sou gamado na loira, mas da morena eu não largo não!
| ----------------------------------------------------------------

#5 crazybaby

crazybaby

    Cyber Eye

  • Banidos
  • PipPipPipPipPipPipPipPipPip
  • 1112 posts
  • Sexo:Não informado
  • Localidade:Divinopolis-MG
  • Interesses:ASP &amp; Design

Posted 28/06/2003, 19:50

Depende, eu nunca soube que ASP trabalhava com mascara de entrada... Isso é pra quando vc for preencher um campo ele se "auto-completar", e é uma forma de validar data, cpf, telefone...

a soh valew pela resposta
naum sabia q html tinha ese recurso valew

muito util
Está com duvida? | Tchau | Entre | Você é visitante?

Regras do Fórum | Warn System

#6 Chinello Cybernético

Chinello Cybernético

    Simplesmente "Chinello"

  • Usuários
  • 1892 posts
  • Sexo:Masculino
  • Localidade:Canoas - RS

Posted 29/06/2003, 04:36

Interessante..

Porém naum gostei..

Naum dá pra apagar os caracteres que foram inseridos pelo script..

Acho que há outra maneira de fazer isso.. ;)

Fui.. :P
Diego Sampaio - kroW - PHP Framework > http://chinelloweb.net/
chinello at gmail dot com

System > Athlon 64 3200+ Mobile | Kubuntu 7.04 Fesity Fawn AMD64 | Kernel 2.6.20-16
Coding @ KDE 3.5.7 | PHP 5.2.1 | Apache 2.2.3 | MySQL 5.0.38

#7 COWBOY_4ever

COWBOY_4ever

    Rodeio Universitário

  • Usuários
  • 483 posts
  • Sexo:Masculino
  • Localidade:Estado do Rio de Janeiro
  • Interesses:Mulheres, dinheiro e bebidas.

Posted 29/06/2003, 14:12

Interessante..

Porém naum gostei..

Naum dá pra apagar os caracteres que foram inseridos pelo script..

Acho que há outra maneira de fazer isso.. ;)

Fui.. :P

Acho que a idéia é exatamente essa: impor um formato pré-definido a quem preenche um formulário, para que as informações cheguem exatamente no formato que vc quer receber, inclusive facilitando o preenchimento e evitando erros de quem digita.
| COWBOY_4ever
|
| ====================================
| Cavalo eu puxo no toco, burro eu puxo no morão.
| Gosto de whisky, mas a cerveja é minha paixão.
| Sou gamado na loira, mas da morena eu não largo não!
| ----------------------------------------------------------------

#8 Chinello Cybernético

Chinello Cybernético

    Simplesmente "Chinello"

  • Usuários
  • 1892 posts
  • Sexo:Masculino
  • Localidade:Canoas - RS

Posted 29/06/2003, 20:08

E eu acho que vc neim entendeu o que eu falei e neim testou o script como eu..

Pega ele, e vai digitando o seu CPF por exemplo (que é grandinho), aí vc vai digitando, e vai aparecendo os pontinhos e talz.. Mas se vc acaba de digitar e depois vc vai conferir, e viu que errou um número, vc naum consegue ir apagando normalmente, quando vc chegar no primeiro caracter gerado pelo script, vc naum vai conseguir mais apagar..

Naum lembro se dá pra passar por cima com a setinha.. Mas caso naum dê, vc teria que ir com o mouse lá e clicar onde vc quer apagar..

Eu acho isso incômodo.. Pois eu uso o teclado pra quase tudo, aí eu tô bem tranquilo digitando as minhas info, e tenho que usar o mouse e talz.. Parece besteira, mas eu naum goto..

Fui.. :P
Diego Sampaio - kroW - PHP Framework > http://chinelloweb.net/
chinello at gmail dot com

System > Athlon 64 3200+ Mobile | Kubuntu 7.04 Fesity Fawn AMD64 | Kernel 2.6.20-16
Coding @ KDE 3.5.7 | PHP 5.2.1 | Apache 2.2.3 | MySQL 5.0.38

#9 COWBOY_4ever

COWBOY_4ever

    Rodeio Universitário

  • Usuários
  • 483 posts
  • Sexo:Masculino
  • Localidade:Estado do Rio de Janeiro
  • Interesses:Mulheres, dinheiro e bebidas.

Posted 29/06/2003, 20:41

Ah tá.. qdo vc disse "caracteres que foram inseridos pelo script" imaginei o ponto, parenteses, barras.... pq os números e letras entendo como inserido por nós e não pelo script.
Mas eu tinha testado sim.. só não tinha reparado isso que vc reparou e realmente é um ponto negativo do script, testei de novo e sobre passar o mouse por cima do número e digitar de novo não adiantou não.. apagou tudo e fica apenas o que é digitado a partir de então..
Usando apenas o teclado a nova entrada vai pro final da sequência de números como vc bem disse. :ok:
| COWBOY_4ever
|
| ====================================
| Cavalo eu puxo no toco, burro eu puxo no morão.
| Gosto de whisky, mas a cerveja é minha paixão.
| Sou gamado na loira, mas da morena eu não largo não!
| ----------------------------------------------------------------

#10 MaXiMuS

MaXiMuS

    o cara que escreve engraçado

  • Usuários
  • 785 posts
  • Sexo:Não informado
  • Localidade:Guarulhos - SP - Brasil

Posted 29/06/2003, 21:14

chinello.. axo q é algo valido sim... testei aki....

a unica deficiencia q tem.. eh q.. pra vc alterar o conteudo vc tem q ir apagando um a um, tipo com o Backspace....
se vc for com o mouse e digitar por cima vai fikar em branco
e se vc for com o ponteiro pelo teclado e apagar vai pro final... mas nada q atrapalhe

#11 lucas souza

lucas souza
  • Visitantes

Posted 02/07/2003, 00:58

Muito interessante mesmo. Mas tem uma coisa q eu não entendi. Por que é q tem q se repetir duas vezes a especificação de cada símbolo?

    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( " ", "" );

FLW pru 6. :ph34r:

#12 Chinello Cybernético

Chinello Cybernético

    Simplesmente "Chinello"

  • Usuários
  • 1892 posts
  • Sexo:Masculino
  • Localidade:Canoas - RS

Posted 03/07/2003, 00:56

Muito interessante mesmo. Mas tem uma coisa q eu não entendi. Por que é q tem q se repetir duas vezes a especificação de cada símbolo?

Pra naum ter erro, pra realmente mudar o caracter.. :lol: :lol: ahuuauhaua

Sei lá véio.. Pra mim naum serve pra nada.. Acho que é rateação.. ;)

Fui.. :P
Diego Sampaio - kroW - PHP Framework > http://chinelloweb.net/
chinello at gmail dot com

System > Athlon 64 3200+ Mobile | Kubuntu 7.04 Fesity Fawn AMD64 | Kernel 2.6.20-16
Coding @ KDE 3.5.7 | PHP 5.2.1 | Apache 2.2.3 | MySQL 5.0.38

#13 FoxCrazy

FoxCrazy

    Bill Medley - He Ain't Heavy, He's My Brother

  • Usuários
  • 187 posts
  • Sexo:Não informado
  • Interesses:ASP Maníaco!

Posted 03/07/2003, 14:14

Ótimo código, parabéns..... :P

.

#14 lucas souza

lucas souza
  • Visitantes

Posted 04/07/2003, 01:09

Muito interessante mesmo. Mas tem uma coisa q eu não entendi. Por que é q tem q se repetir duas vezes a especificação de cada símbolo?

Pra naum ter erro, pra realmente mudar o caracter.. :lol: :lol: ahuuauhaua

Sei lá véio.. Pra mim naum serve pra nada.. Acho que é rateação.. ;)

Fui.. :P

Eu acho q serve pra alguma coisa sim, Chinello.
Tenta deixar apenas uma especificação de cada símbolo. Aqui começou a dar erro. Mas eu não entendi por que?

FLW pru 6. :ph34r:

#15 RenatoAlmeida

RenatoAlmeida

    Normal

  • Usuários
  • 111 posts
  • Sexo:Não informado
  • Localidade:Brasilia - Distrito Federal - Brasil
  • Interesses:PHP<br>HTML<br>JAVA<br>DESING

Posted 28/08/2003, 21:50

Aqui no meu ta funcionando sem nehum defeito.

e está sendo muito util aqui pra mim...

valew cristiano
Voltar para Tutoriais e Artigos de Javascript, Ajax e Metodologias


1 user(s) are reading this topic

0 membro(s), 1 visitante(s) e 0 membros anônimo(s)

  1. Fórum WMO
  2. → Desenvolvimento
  3. → Javascript / DOM / AJAX / ECMAScript
  4. → Tutoriais e Artigos de Javascript, Ajax e Metodologias
  5. Privacy Policy
  6. Regras ·
IPB Skin By Virteq