Problema en NETSCAPE con tabindex y scripts!!!

celia05es
25 de Noviembre del 2004
Hola,
Bueno, no soy una experta en Javascript.... tengo un problem un poco estraño con Netscapte (con IE todo está muy bien). Espero que me podaís ayudar!.



Tengo un problem con los Tabindex con Netscape despues de la llamada a una función JS!
He buscado, buscado.... sin resultados!

Basicamente, el problema es lo siguiente:
Tengo un formulario con:
- field1
- field2
- field3
- field4
...etc
- Field 2 y field3 inicialmente no estan habilitados
- Los campos field2 y field3 se habilitan o no dependiendo del valor de field1 (se hace con un script).
- Si entro algo en field1, field2 y field3 tienen que habilitarse automaticamente y field2 tiene que tener el focus.

AHora bien:
- CASO1: Field1 esta vacio.
Si utilizo el tabulador desde field1 ..... el cursor va directamente a field4.... CORRECTO (CON IE y Net) .. y los campos field2 y field3 no se habilitan.

- CASO2: Field2 no esta vacio.
Si utilizo el tabulador desde field2 .... los campos field2 y field3 se habilitan (correcto).... pero el curso se pone en "field4" .... y eso solamente con NETSCAPE!!!!!. Con EXPLORER el cursor se pone en field2 (como tendría que ser!).

Qauí teneís parte del codigo:
....
Function initForm1(form)
{
var f1=form.field1.value;
if (!f1.match(/^(s)*$/) ) // f1 no esta vacio
{
form.field2.disabled=false;
form.field3.disabled=false;
}
else
{
form.field2.disabled=true;
form.field2.value="";
form.field3.disabled=true;
form.field3.value="";
}
}

.....
Field1:
<input type=text name="field1" tabindex=3 onBlur="initForm1(this.form);"
<br>
Field2:
<input type=text name="field2" tabindex=4>
<br>
Field3:
<input type=text name="field3" tabindex=5>
<br>
Field4:
<input type=text name="field4" tabindex=6>
.....



eth0
25 de Noviembre del 2004
Hombre, así de pronto... se me ocurre que quizá Netscape cambia el estado Activado de los campos antes de actualizar los TabIndex, con lo que el cursor cambia de campo _antes_ de que Netscape restaure los TabIndex de los campos desactivados.

¿Por qué no pruebas a poner un form.field2.focus() al final del trozo de código que reactiva los dos campos?

celia05es
25 de Noviembre del 2004
Gracias por tu rápida respuesta

Bueno, si he probado forzar el focus.... pero el curso sigue en el mismo campo!.

Acabo de ver que ocurre solamente la primera vez... quiero decir que si los campos estan activados o no estan, el tabindex funciona.

Si field1 esta vacio, , la primera vez, hay que pulsar el tabulador dos veces para que se posicione sobre el campo field4. Luego, funciona bien.

Seguramente tendrá algo que ver como dices con la activar/desactivar un campo pero no tengo idea de como arreglarlo!

He puesto:
form.field2.select();
form.field2.focus();

No habría otro modo de hacerlo?.

eth0
25 de Noviembre del 2004
Claro, funciona mientras no cambie el estado de los campos.

El problema concretamente debe estar en que el evento onBlur del primer campo se dispara cuando YA EL CURSOR HA CAMBIADO AL CUARTO CAMPO.

No estoy muy seguro de si esto funcionaría en todos los navegadores, pero bueno:

Existen dos eventos llamados onValidate y onAfterChange. Creo que funcionan en IE, pero no sé si funcionarán con Mozilla y demás. Estos eventos deberían dispararse justo antes de que el cursor salga del campo.

celia05es
25 de Noviembre del 2004
Entonces debería poner el evento "onValidate" con el nombre de campo field1, correcto?
Nunca había oído hablar de este evento (soy principiente). He mirado un poco en internet, pero no entiendo bien. Sería mucho pedir que me explicases lo que tengo que poner?

Gracias

eth0
25 de Noviembre del 2004
Pues eso, que en lugar de poner esto:

onBlur="initForm1(this.form);"

Pongas esto:

onValidate="initForm1(this.form);"

No es complicado, ¿no? ^_^

Y el navegador lanzará ese evento justo antes de que el cursor salga del campo (es decir, cuando vaya a _validar_ el campo). Lo que no estoy seguro es de si funciona con otros navegadores.

celia05es
25 de Noviembre del 2004
Hello,
I have tried what you suggested but it does not work.
THe cursor goes to field4 and in addition the fields 2 and 3 are still disabled!

I modified a little the above code (I gave an error in explorer): in disableFields() I replaced: document.form1 by document.forms[0].

Any more idea?

celia05es
25 de Noviembre del 2004
Perdona!!!! Se me olvido escribir en castellano!!!

Empiezo de nuevo!!
Intenté con "onValidate" pero no funciona.... es pero que antes... ni siguiera desactiva los campos. El curso sigue iendo a field4

Modifique un poco el codigo (habia un error con explorer) en disableFields(). Puse document.forms[0] en vez de document.form1

Más ideas?


celia05es
25 de Noviembre del 2004
Hola,

Hola de nuevo,

Me han dado una solución (ver script abajo) pero resuelve una parte solamente del problema: Considera solamente el primer campo "field2".

Supongo que necesito una solucíon más general que considere todos los campos en cuestión pero no tengo idea de como hacerlo!

Con el siguiente script:
- una vez activado los campos field2 y field3 (se activan poniendo algo en field1)
- Desde field1, se utiliza el tabulador => el curso se posiciona correctamente sobre field2
- Desde field2, si se utiliza el tabulador => el cursor no va al field3 (y es lo que necesito)
Una vez activados los campos necesito ir desde field1 => field2 => field3 => field4.

Alguien me podría ayudar?

Muchas gracias

===============================

<script>
function initForm1(form)
{form.field2.focus()
var f1=form.field1.value;
if (!/^(s)*$/.test(f1) )
{
form.field2.disabled=false;
form.field3.disabled=false;
elem=form.field2
setTimeout('elem.focus()',10);

}
else
{
form.field2.disabled=true;
form.field2.value="";
form.field3.disabled=true;
form.field3.value="";
}
}

function disableFields()
{
document.form1.field2.disabled=true;
document.form1.field3.disabled=true;
}

</script>
<body onLoad=disableFields()>

<form id="form1">
<p>Field1:
<input type="text" name="field1" tabindex="3" onblur="initForm1(this.form);">
<br>Field2:
<input type="text" name="field2" tabindex="4">
<br>Field3: <input type="text" name="field3" tabindex="5">
<br>Field4: <input type="text" name="field4" tabindex="6">
</p>
</form>