2011-09-12 19 views
6

Tengo un problema de usabilidad en un sitio web mío. Tengo un conjunto de pestañas, cada una contiene un formulario. Cuando hace clic en el enlace de la pestaña, le da enfoque al primer cuadro de texto en el cuerpo del contenido de la pestaña. A las personas orientadas al ratón les encanta esta "característica". El problema es cuando los usuarios orientados al teclado usan la tecla TAB en su teclado para ir a través de las pestañas. Pulsan Enter en la pestaña que quieren mirar, el evento click se dispara y aparece la pestaña, pero se enfoca en el cuadro de texto, ajustando completamente el orden de las pestañas. Entonces, cuando vuelven a presionar la pestaña, quieren ir a la siguiente pestaña de la pantalla, pero como el foco se movió dentro del formulario, no pueden acceder fácilmente a la siguiente pestaña usando el teclado.jQuery click event - ¿Cómo saber si se hizo clic con el mouse o se presionó la tecla Intro?

Por lo tanto, dentro del evento click tengo que determinar si realmente hicieron clic con un botón del mouse. es posible? Mi primer intento fue la siguiente:

$("#tabs li a").click(function(e) { 
    var tab = $(this.href); 
    if(e.keyCode != 13) 
    $("input:first", tab).focus(); 
}); 

Pero keyCode es siempre 0. La propiedad which también es siempre 0. Por favor, ayuda!

+0

Probablemente pueda hackearlo colocando un controlador .focus() en el cuadro de texto con un poco de lógica. – krasnerocalypse

+0

@krasnericalypse Err, en realidad no. Una vez que se da un enfoque al cuadro de texto/menú desplegable, es demasiado tarde para recuperarlo. –

+0

jaja. Esta es una pregunta difícil. – krasnerocalypse

Respuesta

4

Aquí está la solución que se me ocurrió, es sorprendentemente simple. Me atrapado keydown en los enlaces de la ficha, y activa el evento click cuando era keyCode 13. Por suerte, la función trigger nos permite pasar parámetros adicionales al controlador de eventos ...

$("#tabs li a").keydown(function(e) { 
    if(e.keyCode == 13) { 
    $(this).trigger("click", true); 
    e.preventDefault(); 
    } 
}); 

Así que sólo tenía que cambiar mi clic manejador para recibir el nuevo parámetro y utilizarlo ...

$("#tabs li a").click(function(e, enterKeyPressed) { 
    if(enterKeyPressed) 
    alert("Enter key"); 
    else 
    alert("Clicked"); 
}); 

que poner un demo on jsFiddle también. Gracias a todos los que leyeron la pregunta.

+0

termino de hacer lo mismo unos 4 minutos, somos genios = P – AgelessEssence

0

¿Funcionaría una variable de "foco" global, que deshabilita el enfoque en la configuración del mouse después del uso de pestañas en una pestaña determinada hasta que se mueva un mouse a un nuevo bloque.

Esta no es la característica que solicita, pero creo que podría darle lo que está buscando.

por ejemplo. la opción 5 de pasadores de mouse, se golpea la pestaña, ahora se almacena el 5 en la variable, se desalienta el foco a 5 hasta que se haya enfocado algo más, pero cuando algo más se enfoca, global se vuelve a -1.

Solución más limpia No lo admito.

+0

No puedo tener tantos manejadores de eventos pasando ... estos formularios son grandes. Esto bloqueará el navegador, seguro. –

Cuestiones relacionadas