Como poner el foco donde corresponde.

Tenter · #1 (**permalink**) 25/01/2005, 13:21

Hola.
El problema lo tengo al recargar la página. Me explico, tengo una página con un formulario, que contiene cuatro campos input text. Cada vez que el foco sale de alguno de los campos input text, la página se recarga.
Pero yo necesito que dependiendo del input text que se abandona, el foco recaiga sobre otro input text ya determinado.

¿Alguna idea?

Saludos.

Dianita · #2 (**permalink**) 25/01/2005, 14:39

Mi solucion requiere de un poco de PHP si no conoces nada de PHPç, no te preocupes porque no es gran cosa:
Pega el código tal cual y ejecutalo.

Código PHP:

  
<? 
$valida_w = $_POST['valida_f']; //pasa el contenido de la variable variable_f, tipo hidden, a una                                               variable de php $variable_w 
echo $valida_w;                  //imprime el valor de la variable 
 
?> 
 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>Documento sin t&iacute;tulo</title> 
 
 
<script language="JavaScript"> 
 
//Esta indica que campo debe recibir el foco dependiendo de las circunstancias  
function foco() 
{ 
 
alert (document.CON105.valida_f.value); 
if(document.CON105.valida_f.value=="") 
{document.CON105.campo_uno.focus();} 
 
if(document.CON105.valida_f.value=="1") 
{document.CON105.campo_dos.focus();} 
 
if(document.CON105.valida_f.value=="2") 
{document.CON105.campo_tres.focus();} 
 
if(document.CON105.valida_f.value=="3") 
{document.CON105.campo_cuatro.focus();} 
     
} 
//Esta funcion maneja la navegacion cn el teclado 
//CurrentField indica el campo que tiene el foco 
//s guarda el numero de la tecla que se oprimió, s=13 indica que oprimiste enter 
function teclado(form,currentField,s)  
{ 
s=window.event.keyCode 
             
    if (s=='119') 
    { return popup(this, 'thoughts');}    //ignora esto 
     
     
else{ 
        if ((currentField=="campo_uno")&&(s=='13')&&(document.CON105.campo_uno.value=="")) 
        {alert ("Este dato es obligatorio"); 
         document.CON105.campo_uno.focus();} 
          
         if ((currentField=="campo_uno")&&(s=='13')&&(document.CON105.campo_uno.value!="")) 
        { document.CON105.valida_f.value='1'; 
        form.submit();} 
  
     
else{ 
        if ((currentField=="campo_dos")&&(s=='13')&&(document.CON105.campo_dos.value=="")) 
        {alert ("Este dato es obligatorio"); 
         document.CON105.campo_dos.focus();} 
          
         if ((currentField=="campo_dos")&&(s=='13')&&(document.CON105.campo_dos.value!="")) 
        { document.CON105.valida_f.value='2'; 
        form.submit();} 
 
else{ 
        if ((currentField=="campo_tres")&&(s=='13')&&(document.CON105.campo_tres.value=="")) 
        {alert ("Este dato es obligatorio"); 
         document.CON105.campo_tres.focus();} 
          
         if ((currentField=="campo_tres")&&(s=='13')&&(document.CON105.campo_tres.value!="")) 
        { document.CON105.valida_f.value='3'; 
        form.submit();} 
         
else{ 
        if ((currentField=="campo_cuatro")&&(s=='13')&&(document.CON105.campo_cuatro.value=="")) 
        {alert ("Este dato es obligatorio"); 
         document.CON105.campo_cuatro.focus();} 
          
         if ((currentField=="campo_cuatro")&&(s=='13')&&(document.CON105.campo_cuatro.value!="")) 
        { document.CON105.valida_f.value='4'; 
        form.submit();} 
}}}}  
 
} 
</script> 
 
 
 
 
</head> 
 
<body onLoad="foco()"> 
<form name="CON105" method="post" action=""> 
  <p>&nbsp;  </p> 
  <table width="470" border="1"> 
    <tr> 
      <td>campo uno </td> 
      <td><span class="Estilo4"><font color="#FFFFFF"> 
        <input name="campo_uno" type="text" class="Estilo13"  id="campo_uno"  value="<?php echo $campo_uno?>" onKeyUp="teclado(this.form,this.name,window.event.keyCode)" > 
      </font></span></td> 
    </tr> 
    <tr> 
      <td>campo dos </td> 
      <td><span class="Estilo4"> 
        <input name="campo_dos" type="text" class="Estilo13"  id="campo_dos" value="<?php echo $campo_dos?>"  onKeyUp="teclado(this.form,this.name,window.event.keyCode)"> 
      </span></td> 
    </tr> 
    <tr> 
      <td>campo tres </td> 
      <td><font size="2" face="Verdana, Arial, Helvetica, sans-serif" class="Estilo13"> 
        <input name="campo_tres" type="text" id="campo_tres"  value="<?php echo $campo_tres?>" onKeyUp="teclado(this.form,this.name,window.event.keyCode)"   > 
      </font></td> 
    </tr> 
    <tr> 
      <td>campo cuatro </td> 
      <td><input name="campo_cuatro" type="text" class="Estilo13"  id="campo_cuatro" value="<?php echo $campo_cuatro?>" onKeyUp="teclado(this.form,this.name,window.event.keyCode)" ></td> 
    </tr> 
    <tr> 
      <td colspan="2"><div align="center"> 
        <input name="valida_f" type="hidden" id="valida_f" value="<?php echo $valida_w?>"> 
      </div></td> 
    </tr> 
  </table> 
  <p>&nbsp;</p> 
</form> 
</body> 
</html>

Tenter · #3 (**permalink**) 26/01/2005, 16:53

Gracias Diana por tu ayuda, pero he estado haciendo pruebas y no consigo hacerlo funcionar.

Si coloco solamente el código que tu me has pasado, la página no se recarga nunca. Y la que yo tengo la recargo con el evento onBlur, en cada input.
En las pruebas que he estado haciendo creo que no funciona porque el botón "valida_f" no tiene ningún valor. Es decir, el alert aparece en blanco, y al recargar (las pruebas las he hecho en mi página) el foco aparece siempre en el primer input (en el "campo_uno").
Por cierto, el PHP no es problema, yo también lo estoy utilizando en mi página.

Si te hacen falta más datos dímelo y los coloco para que te aclares mejor.
Gracias.

Saludos.

angsanchez · #4 (**permalink**) 26/01/2005, 18:06

Tenter, si la página se recarga no creo que se pueda "recordar" en qué campo tiene que ponerse el foco, salvo usando una cookie que guarde el indicador del campo antes de hacer la recarga y que se lea al cargar la página.

Tenter · #5 (**permalink**) 30/01/2005, 03:36

Gracias angsanchez, entonces lo que voy a utilizar son sesiones de php. Pero para eso necesito conocer el número que corresponde a cada tecla. Se que se obtiene con window.event.keyCode , pero no logro que aparezca en pantalla. Lo he intentado de varias formas, y nada.

Como podría hacerlo???

Gracias.

JavierB · #6 (**permalink**) 30/01/2005, 10:53

Hola Tenter

Puedes encontrar varias páginas en internet donde ver los códigos de las teclas, pero si prefieres que te aparezca en pantalla puedes usar algo así:

<body onkeypress="alert(event.keyCode)">

Solo funciona en IE.

Saludos,

Tenter · #7 (**permalink**) 30/01/2005, 11:09

Gracias JavavierB, yo lo estaba intentando con FireFox.
Pues ahora ya tengo dos problemas:
-Mi pagina tiene que funcionar en todos los navegadores (sobre todo en FireFox).
-¿Cómo puedo hacer que el foco valla pasando de un input text a otro, si la pagina se recarga al salir de cada input text? La tecla que cambiaría de un input text a otro sería el tabulador.

La página la tengo que recargar porque tengo que hacer consultas con la base de datos. Lo digo por la utilización de cookies, sesiones o cualquier otro método que pueda hacer que esto funcione.

¿Alguna idea?

Gracias.
Saludos.