Fórum WMO: Mudar Campos De Form Automaticamente - Fórum WMO

Ir para

Página 1 de 1
  • Novo tópico
  • Responder
  • Ícone  Compartilhar

Mudar Campos De Form Automaticamente como?

#1 Membro offline   <%Rafael%> 

  • Cadê a Mulhegada?
  • Ícone
  • Grupo: Usuários
  • Posts: 291
  • Cadastrado: 25/05/2003
  • Sexo:Não informado
  • Localidade:Jundiaí - SP
Pontos: 0
Neutral

Postou 05/03/2004, 18:09

E ai pessoal blz???

Minha dúvida é:

Como fazer para que, após o usuário preencher um input text, ele pule para o input text seguinte???

Por exeplo, no formulário:

Citar

<input type="text" name="ddd" maxlength="2" size="2"><br>
<input type="text" name="telefone" size="10">


Como fazer para, após o usuário digitar o DDD (Ex.: 11) no campo DDD, ele pular automaticamente para o campo telefone???

Um exemplo disso pode ser visto no site do Banco Real, onde o usuário preenche no pé da página um formulário para acessar a conta... veja NESSE LINK...

Como fazer isso??? Por favor...

Valeu galera...
Abraços!!! :D
Toda manhã, na África
Uma Gazela desperta
Sabe que deverá correr muito do Leão
Ou será Morta

Toda manhã, na África
Um Leão desperta
Sabe que deverá correr muito atrás da Gazela
Ou morrerá de fome

Quando o Sol surgir
Não importa o que seja... Leão ou Gazela
Será melhor começar a correr!

Meu BlogMeu Flog
0

#2 lucianobruch

  • Grupo: Visitantes
Pontos: 0

Postou 05/03/2004, 19:58

Isso é javascript, é so vc clicar com o botao direito do mouse e pedir para ver o codigo fonte.
Nao vou explicar pq to sem tempo:
AI vai o codigo:
<html><head><title>Portal BANCO REAL - ABN AMRO</title>
  <style>
	TD {FONT-FAMILY: Arial, Helvetica, sans-serif; FONT-SIZE: 11px; MARGIN: 0px; COLOR: #FFFFFF;}
	.optionBox2, .inputBox3, .inputBox4, .inputBox5, .inputBox6 { font-family: Arial, Helvetica, sans-serif; font-size: 10px; color: #000000; height:19px; }
	.optionBox2 { width:127px; height:16px;}
	.inputBox3 { font-size: 11px;width:90px;}
	.inputBox4 { width:40px;}
	.inputBox5 { width:40px;}
	.inputBox6 { width:60px;}
	A:link {font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; color: #ffffff; line-height: 12px;}
	A:visited {font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; color: #ffffff;}
	A:active {font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: none; color: #ffffff;}
	A:hover {font-family: Arial, Helvetica, sans-serif; font-size: 11px; text-decoration: underline; color: #ffffff;}
  </style>
  <script language="Javascript">
	function configuraParametros(){
    var CORFUNDO = '';
    var SIGLASIST = '';
       var params = location.search.substr(1).split('&');
       for(var i=0; i<params.length; i++) {
                 var exprParam = params[i];
               posIgual = exprParam.indexOf('=');
               if (posIgual!=-1) {
                       exprParam = exprParam.substring(0,posIgual+1)+"'"+exprParam.substr(posIgual+1)+"
'";
                       eval(exprParam);
               }
       }
       
       if (CORFUNDO == '' ) {
          CORFUNDO = "006766";
       }
       if (SIGLASIST == '') {
          SIGLASIST = "RIB";
       }
       if (SIGLASIST == "rie" || SIGLASIST == "RIE"){
      document.login.PROD_I.selectedIndex = 1;
       } else {
      document.login.PROD_I.selectedIndex = 0;        
       }
       document.bgColor="#"+CORFUNDO;
	}
  </script>
  <script language=javascript>
	function InicializarIndices() {
  if (document.CargaInicial==null) {
 	 document.CargaInicial=false; // Seta para só fazer uma vez por documento
 	 var ctrlAnterior=null;
 	 var IndAnt=0;
 	 for ( var i=0; i<document.forms[0].elements.length;i++)	{
    var e=document.forms[0].elements[i];
    if ( e.type!="hidden" && e.type!="image" ) {
   	 if (ctrlAnterior != null) ctrlAnterior.IndicePosterior=i;
   	 ctrlAnterior=e;
   	 e.Indice=i;
   	 e.IndiceAnterior=IndAnt;
    }
 	 }
  }
	}
	
	// Colocar o foco em determinado campo
	function SetarFoco(ind) {
  InicializarIndices();
  if ( isNaN(ind) && document.forms[0].elements[ind].type!="hidden" )
 	 document.forms[0].elements[ind].focus();
  else
 	 for (;ind<document.forms[0].elements.length;ind++)
    if (document.forms[0].elements[ind].type!="hidden")
   	 break;
 	 if (ind<=document.forms[0].elements.length)
    document.forms[0].elements[ind].focus();
  }
	
	// Limpar o conteúdo do(s) campo(s)
	function LimparCampo(ind) {	// Para -1, limpa todos os elementos
  if (isNaN(ind)) // Limpa pelo nome
 	 document.forms[0].elements[ind].value="";
  else if (ind != -1) // Limpa o elemento "ind" ( só considera "text" e "password" )
 	 for (var i=ind; i < document.forms[0].elements.length;i++ )
    if(document.forms[0].elements[i].type=="text" || document.forms[0].elements[i].type=="password") { // Só limpa campo "text"
   	 document.forms[0].elements[i].value="";
   	 break;
    }
  else // Limpa todos os elementos "text" e "password"
 	 for ( var i=0; i < document.forms[0].elements.length; i++)
    if ( document.forms[0].elements[i].type=="text" || document.forms[0].elements[i].type=="password")
   	 document.forms[0].elements[i].value="";
	}
	
	// Verificar qual navegador
	function QualNavegador() {
  var s = navigator.appName
  if(s == "Microsoft Internet Explorer") return "IE";
  else if ( s == "Netscape" ) return "NE";
  else return "";
	}
	
	// Verificar qual a versão do navegador
	function QualVersao() {
  var s = navigator.appVersion;
  if ( QualNavegador() == "IE" ) {
 	 var i = s.search("MSIE");
 	 s=s.substring(i+5);
 	 i=s.search(".");
 	 return parseInt(s.substring(0,i+1));
  }
  else if ( QualNavegador() == "NE" )	return parseInt(s.substring(0,1));
  else return 0;
	}
	
	// Setar o evento
	function SetarEvento(ctrl, Tam, Tipo, AutoSkip) { // Filtra navegadores conhecidos
  var s = QualNavegador();
  if (s.length==0) return;
  if (s=="IE" && QualVersao()>6) return;
  if (s=="NE" && QualVersao()>4) return;
  if (ctrl.onkeypress==null) {
 	 if (AutoSkip==null) AutoSkip=true;
 	 if (Tipo!=null)	Tipo.toUpperCase();
 	 ctrl.Tam=Tam;
 	 ctrl.Tipo=Tipo;
 	 ctrl.AutoSkip=true;
 	 ctrl.Saltar=false;
 	 InicializarIndices();
 	 ctrl.onkeypress=ValidarTecla;
 	 if (QualNavegador()=="IE" && QualVersao()>=5) ctrl.onkeyup=SaltarCampo;
  }
	}
	
	function SaltarCampo(ctrl) {
  if (ctrl==null)	ctrl=this;
  if ( ctrl.AutoSkip && ctrl.Saltar)
 	 if (ctrl.Saltar) {
    ctrl.Saltar=false;
    if ( ctrl.IndicePosterior != null ) SetarFoco(ctrl.IndicePosterior);
 	 }
	}
	
	// Fazer o salto de campo
	function ValidarTecla(evnt) {
  var tk;
     var c;
  // Recebe a tela pressionada
  tk = ( (QualNavegador()=="IE") ? event.keyCode : evnt.which);
     c=String.fromCharCode(tk);
  c=c.toUpperCase();
  // Só aceita teclas alfanuméricas. Não aceita teclas de controle
  if (tk == 13) enviaFormLogin(document.login.PROD_I[document.login.PROD_I.selectedIndex], document.login.USERID, document.login.AGENCIA, document.login.CONTA);
     if(tk<32) return true;
  if (tk>127)	return false;
	
  switch (this.Tipo) {
  case "D":
 	 if (c<"0" || c>"9") {
             alert("O acesso à sua conta online mudou: sua senha deve ser digitada na próxima tela! Este campo só aceita números");
          return false;
       	 }
 	 break;
  case "N":
 	 if ((c<"0" || c>"9") && (c!="." && c!=","))
    return false;
 	 if ((c==",") && ((this.value.search(",")>-1) || (this.value.length==0)))
    return false;
 	 if ((c==".") && (this.value.length==0))
    return false;
 	 break;
  case "C":
 	 if ( c<"A" || c>"Z" ) return false;
 	 break;
  default:
 	 break;
  }
  this.Saltar=(this.value.length==this.Tam-1);
  if(((QualNavegador()=="IE") && QualVersao()<5) || (QualNavegador()!="IE")) SaltarCampo(this);
  return true;
	}
	
	function reloadPage(init) {
   c = navigator.appName
   if (init==true) with (navigator) {
     if (c=="Netscape") { document.pgW=innerWidth; document.pgH=innerHeight; onresize=reloadPage; }
   } else if (innerWidth!=document.pgW || innerHeight!=document.pgH) location.reload();
	}
	reloadPage(true);
	
	window.defaultStatus="Portal BANCO REAL - ABN AMRO"
	
	function abre(sUrl) { window.open('http://www.bancoreal.com.br' + sUrl,'','scrollbars=yes,resizable=yes,toolbar=yes,width=780,height=520') }
  </script>  
 </head>
 <body bgcolor="#006766" topmargin=0 leftmargin=0 marginwidth=0 marginheight=0 onload="configuraParametros();">
   <table height=30 cellspacing=0 cellpadding=0 border=0 width=780>
    <tr>
    <td>
     <table cellspacing=0 cellpadding=1 border=0 width=100%>
      <form name="login" style="margin:0" autocomplete="off">
   	 <tr>
      <td width=3%></td>
   <td width=24% valign=top><img src="/frames/images/spacer.gif" height=1 width=1><br><select class="optionBox2" name="PROD_I" style="width:132" width="132">
    <option value=1 selected>Real Internet Banking</option>
    <option value=2 >Real Internet Empresa</option>
   </select></td>
      <td width=10% valign=middle align=right><b>Usu&aacute;rio&nbsp;</b></td>
   <td width=16% valign=middle><input class="inputBox3" type="text" name="USERID" size="10" maxLength=14  VALUE="" onfocus="SetarEvento(this,14)"></td>
         <td width=10% valign=middle align=right><b>Ag&ecirc;ncia&nbsp;</b></td>
      <td width=8% valign=middle><input class="inputBox5" type="text" name="AGENCIA" maxLength=4 size=4 VALUE="" onfocus="SetarEvento(this,4,'D')"></td>
         <td width=8% valign=middle align=right><b>Conta&nbsp;</b></td>
         <td width=14% valign=middle>
<input class="inputBox6" type="text" name="CONTA" maxLength=7 size=7  VALUE="" onfocus="SetarEvento(this,7,'D')">
            </td>
       <td width=8% valign=middle><img src="/frames/images/spacer.gif" height=1 width=1><br>
              <a href="javascript:enviaFormLogin(document.login.PROD_I[document.login.PROD_I.selectedIndex]
, document.login.USERID, document.login.AGENCIA, document.login.CONTA);"><img src="/frames/images/ok.gif" name="Submit" onmouseover="window.status='OK'; return true" value="Ok" width=23 height=18 border=0 alt="Ok"></a> 
            </td>
     </tr>
      </form>
     <script language="Javascript" src="/frames/js/login_api.js" type="text/javascript"></script>
  </table>
	</td>
	<td align=center>
  <table cellspacing=0 cellpadding=0 border=0 width=230>
<script>
function getArgs(){
      var args = new Object();
      var query = location.search.substring(1);
      var pairs = query.split("&");
      for(var i=0;i<pairs.length;i++){
            var pos=pairs[i].indexOf('=');
            if(pos==-1) continue;
            var argname = pairs[i].substring(0,pos);
            var value = pairs[i].substring(pos+1);
            args[argname] = unescape(value);
      }
      return args;
}
var args=getArgs();
</script>
	<script>
	function troca_target(sLink){
  url=document.location.href
 	 if(args.target){
 	 sLink=sLink.replace('target="portal"','target="'+args.target+'
"')
  }
  document.write(sLink)
	}
	</script>
   <tr>
    <td align=center><script>troca_target('<a href="/index_internas.htm?sUrl=/veja_um_clique/seguranca/tpl_seguranca_abre.shtm" target="portal" onmouseover="window.status=\'Segurança\'; return true" class="menulogin">')</script><b>Seguran&ccedil;a</b>
</a></td>
    <td align=center valign=middle>&nbsp;|&nbsp;</td>
    <td><script>troca_target('<a href="/index_internas.htm?sUrl=/demonstracoes/tpl_demonstracoes.shtm" target="portal" onmouseover="window.status=\'Demonstrações\'; return true" class="menulogin">')</script><b>Demonstra&ccedil;&otilde;
es</b></a></td>
    <td align=center valign=middle>&nbsp;|&nbsp;</td>
    <td><script>troca_target('<a href="/index_internas.htm?sUrl=/cadastre_se/tpl_cadastrese.shtm" target="portal" onmouseover="window.status=\'Cadastre-se\'; return true" class="menulogin">')</script><b>Cadastre-se</b><
/a></td>
   </tr>
  </table>
  </td>
   </tr>
  </table>
 </body>
</html>

0

#3 Membro offline   <%Rafael%> 

  • Cadê a Mulhegada?
  • Ícone
  • Grupo: Usuários
  • Posts: 291
  • Cadastrado: 25/05/2003
  • Sexo:Não informado
  • Localidade:Jundiaí - SP
Pontos: 0
Neutral

Postou 05/03/2004, 23:47

ahh sim....
é que eu não manjo muito de javascript... e pelo jeito... esse código é puro java script.. hehehe.... tentei separar mas naums ei qual parte do código é para fazer o salto dos campos... :(

Abraçoss!!
Toda manhã, na África
Uma Gazela desperta
Sabe que deverá correr muito do Leão
Ou será Morta

Toda manhã, na África
Um Leão desperta
Sabe que deverá correr muito atrás da Gazela
Ou morrerá de fome

Quando o Sol surgir
Não importa o que seja... Leão ou Gazela
Será melhor começar a correr!

Meu BlogMeu Flog
0

#4 Membro offline   COWBOY_4ever 

  • Rodeio Universitário
  • Ícone
  • Grupo: Usuários
  • Posts: 483
  • Cadastrado: 07/05/2003
  • Sexo:Masculino
  • Localidade:Estado do Rio de Janeiro
  • Interesses:Mulheres, dinheiro e bebidas.
Pontos: 0
Neutral

Postou 06/03/2004, 14:07

Fiz um exemplo com DDD (pula campo após preencher 2 dígitos):

Citar

<input type="text" name="campo" value="" size="2" onkeyup="java script:if (campo.value.length==2){campo2.focus()}" maxlength="2">
<input type="text" name="campo2" size="8" maxlength="8">

(y)
| 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!

| ----------------------------------------------------------------
0

#5 Membro offline   br_uno 

  • Normal
  • Ícone
  • Grupo: Usuários
  • Posts: 88
  • Cadastrado: 25/12/2002
  • Sexo:Não informado
  • Localidade:Presidente Prudente - SP
  • Interesses:SkoL !!!
Pontos: 0
Neutral

Postou 07/03/2004, 12:08

qual seria realmente o codigo.... sera q alguem pode da um help ???

Citar

[...]
0

#6 Membro offline   COWBOY_4ever 

  • Rodeio Universitário
  • Ícone
  • Grupo: Usuários
  • Posts: 483
  • Cadastrado: 07/05/2003
  • Sexo:Masculino
  • Localidade:Estado do Rio de Janeiro
  • Interesses:Mulheres, dinheiro e bebidas.
Pontos: 0
Neutral

Postou 07/03/2004, 13:09

Citar

<input type="text" name="campo" value="" size="2" onkeyup="java script:if (campo.value.length==2){campo2.focus()}" maxlength="2">
<input type="text" name="campo2" size="8" maxlength="8">


Quando o primeiro campo alcança o número máximo de caracteres pré-determinado (maxlength), o foco passa para o outro campo (determinado em vermelho).
| 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!

| ----------------------------------------------------------------
0

#7 Membro offline   br_uno 

  • Normal
  • Ícone
  • Grupo: Usuários
  • Posts: 88
  • Cadastrado: 25/12/2002
  • Sexo:Não informado
  • Localidade:Presidente Prudente - SP
  • Interesses:SkoL !!!
Pontos: 0
Neutral

Postou 07/03/2004, 14:16

VALEW !!!!

Citar

[...]
0

#8 Membro offline   <%Rafael%> 

  • Cadê a Mulhegada?
  • Ícone
  • Grupo: Usuários
  • Posts: 291
  • Cadastrado: 25/05/2003
  • Sexo:Não informado
  • Localidade:Jundiaí - SP
Pontos: 0
Neutral

Postou 07/03/2004, 17:12

Ae Cowboy era exatamente isso que eu precisava... hehehe

Valeuuu!!!

Abraços!!!
Toda manhã, na África
Uma Gazela desperta
Sabe que deverá correr muito do Leão
Ou será Morta

Toda manhã, na África
Um Leão desperta
Sabe que deverá correr muito atrás da Gazela
Ou morrerá de fome

Quando o Sol surgir
Não importa o que seja... Leão ou Gazela
Será melhor começar a correr!

Meu BlogMeu Flog
0

Página 1 de 1
  • Novo tópico
  • Responder

1 usuário(s) está(ão) lendo este tópico
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)