Javascript. Dudas varias.

[borjagat]

Hola

Tengo las siguientes dudas sobre controles y javascript:
* Los combobox deben autodesplegarse cuando cogen el foco.
* Los campos readonly no deben coger el foco al pasar con el tabulador.
* Los campos no deben estar "selected" cuando cogen el foco.

Un saludo

Borja

[Mahalo]

Pues mejor pregunta en el foro de javascript.

[derkenuke]

Hola borjagat, no sé si te has dedicado a hacer pruebas... pero creo que ésto resuelve buena parte de tus dudas:

Código PHP:

  <input type="text" tabindex="1" /> 
<select tabindex="2"> 
    <option>foo</option> 
    <option>bar</option> 
</select> 
<input type="text" readonly="readonly" value="hola" tabindex="3" /> 
<input type="text" disabled="disabled" value="no disponible" tabindex="4" /> 
<input type="text" tabindex="5" />  
   

Como ves los select no se autodespliegan cuando cogen el foco (si lo haces con tabulador), se despliegan si hacemos click en ellos.

Los campos readonly sí que cogen el foco cuando pasamos con el tabulador, no podemos editarlos pero sí nos podemos localizar en ellos. Sin embargo los disabled no responden al tabulador.


Respecto a tu última duda no la tengo clara... ¿hablas de los selects? En IE sí se selecciona la primera opción del select, pero en FF no queda seleccionada ninguna hasta que no lo hagamos con la barra espaciadora. Sin embargo si el select es de tamaño > 1 (atributo size) en IE (ni FF) se selecciona ninguna opción al recibir el foco con el tabulador:

Código PHP:

  <select tabindex="2" size="2"> 
    <option>foo</option> 
    <option>bar</option> 
    <option>foo</option> 
    <option>bar</option> 
    <option>foo</option> 
    <option>bar</option> 
</select>  
   

Bueno, espero que haya tocado todo lo que cuestionas.

[borjagat]

* Los combobox deben autodesplegarse cuando cogen el foco.
--> NO es posible que cuando coja el foco se autodespliegue. Hacerlo a mano? algo como onfocus="this.click()" o similar?
* Los campos readonly no deben coger el foco al pasar con el tabulador.
-->Si les pongo un tabindex fuera del orden no pasaré por ellos.
* Los campos no deben estar "selected" cuando cogen el foco.
->Me refiero a que cuando coja el focus no se seleccione el texto que hubiese si no que este sin subrayar

[borjagat]

Duda es posible en el metodo onbeforeunload hacer un redirect a una nueva pagina y luego a la pagina a la que íbamos. Es decir si íbamos a a.htm desde b.htm en b.htm en el obbeforeunload ir previamente a c.html y luego a a.html.

Las dudas anteriores siguen

[derkenuke]

Hola de nuevo borjagat:

Voy a ir ordenadamente para no perdernos:

Iniciado por borjagat

* Los combobox deben autodesplegarse cuando cogen el foco.
--> NO es posible que cuando coja el foco se autodespliegue. Hacerlo a mano? algo como onfocus="this.click()" o similar?

Los selects como has visto no se despliegan, y no conozco ninguna manera de forzar a que se desplieguen, ya que click() está sólo disponible para IE, es de dudosa seguridad. Lo único que podrás hacer es cambiarle de tamaño con el size o simular un select con javascript (no te lo recomiendo).

Iniciado por borjagat

* Los campos readonly no deben coger el foco al pasar con el tabulador.
-->Si les pongo un tabindex fuera del orden no pasaré por ellos.

Bueno, no pasas por ellos pero al principio. Fíjate en este ejemplo basado en el inicial:

Código PHP:

  <input type="text" tabindex="1" /> 
<select tabindex="2"> 
    <option>foo</option> 
    <option>bar</option> 
</select> 
<input type="text" readonly="readonly" value="hola" tabindex="17" /> 
<input type="text" disabled="disabled" value="no disponible" tabindex="4" /> 
<input type="text" tabindex="5" />  
   

He cambiado el tabindex del campo readonly a 17, y cuando tabulamos lo hacemos en este orden según los tabindex: 1,2,4,5,17. El último elemento será el readonly. Para "saltarte" el focus, podrías hacer un truquito, manejar el evento onfocus para que salte al elemento que tiene otro tabindex:

Código PHP:

  <form> 
    <input type="text" tabindex="1" /> 
    <select tabindex="2"> 
        <option>foo</option> 
        <option>bar</option> 
    </select> 
    <input type="text" readonly="readonly" value="hola" tabindex="3" onfocus="pasarAlSiguiente(this)" /> 
    <input type="text" disabled="disabled" value="no disponible" tabindex="4" /> 
    <input type="text" tabindex="5" />  
</form> 
 
 
 
 
 
<script type="text/javascript"> 
<!-- 
 
function pasarAlSiguiente(campoActual) { 
    var tabIndexActual = parseInt( campoActual.getAttribute("tabIndex") ); 
    // tengo que encontrar el campo dentro del formulario que tenga un tabindex tabIndexActual+1 
    var fr = campoActual.form; 
    var nCampos = fr.length; 
    for(var i=0, tabIndexAux; i<nCampos; i++) { 
        tabIndexAux = parseInt( fr.item(i).getAttribute("tabIndex") ); 
        if( tabIndexAux === tabIndexActual+1 ) { 
            if( fr.item(i).disabled===false && fr .item(i).type!='hidden')         // casos en que no acepta el focus 
                fr.item(i).focus(); 
            else 
                tabIndexActual++; 
        } 
    } 
} 
 
// --> 
</script>  
  

Es un ejemplo, y no está preparado para todos los casos, pero funcionará en éste en concreto por ejemplo. Como ves buscamos el siguiente elemento, y le damos el foco (siempre que no sea tipo hidden o esté disabled...).



Más, veamos.

Iniciado por borjagat

* Los campos no deben estar "selected" cuando cogen el foco.
->Me refiero a que cuando coja el focus no se seleccione el texto que hubiese si no que este sin subrayar

Bueno, hay maneras en javascript de colocar el cursor donde quieras en un textarea o en una caja de texto. Se suelen llamar setCaretPosition o doSetCaretPosition, cosas así. No hay más dificultad que encontrarla:

Código PHP:

  <input type="text" tabindex="5" value="no se seleccionará al focus" onfocus="ponCursorEnPos(this, 0);" />  
   

La función ponCursorEnPos te colocará el cursor donde quieras, prueba valores si quieres.




Sobre lo del onbeforeunload no he probado nada. ¿Has probado tú? Son muchas dudas para un mismo post que podrías ir averiguando tú mismo.


Un saludo

[borjagat]

Muchas gracias ya te comento