Usando JavaScript, ¿cómo se puede saber si un usuario está retrocediendo?

Tengo un enlace HTML, y deseo tomar alguna medida cuando el usuario se desplace fuera de ella, pero solo si el usuario desplaza la pestaña hacia adelante en el documento, en lugar de hacia atrás.Usando JavaScript, ¿cómo se puede saber si un usuario está retrocediendo?

¿Existe una manera confiable de navegador cruzado para detectar la forma en que el usuario está tabulando a través del documento o, de hecho, si están escaneando el documento? Estoy vinculado al evento blur, pero eso no significa necesariamente que el usuario esté tabbrando.

que he tenido un vistazo a inspeccionar el valor de document.activeElement, o el atributo hasFocus del elemento enfocable previa en la fuente, pero:

los parecer como adiciones relativamente recientes, y por lo tanto puede que no haya ampliamente compatible, y
No estoy seguro de que se puedan inspeccionar cuando se desencadena el evento blur, ya que incluso si el usuario está tabbrando, no creo que el próximo elemento esté enfocado todavía.

Fuente

2011-05-26 Paul D. Waite

Es muy peculiar de su parte hacer tales preguntas, ya que su reputación es bastante alta y especialmente porque tiene ** JavaScript **, ** HTML ** y ** jQuery ** insignias ... Soy un un poco desconcertado. : S –

¿Qué quieres hacer en respuesta a esto? Hay una guía de accesibilidad general en la que nunca debe 'cambiar el contexto' (por ejemplo, mover el foco a otro lugar, navegar a una página diferente) en respuesta al cambio de enfoque, independientemente de la dirección. Lo correcto para hacer aquí puede depender de lo que planee hacer en respuesta al cambio de enfoque ... – BrendanMcK

@BrendanMcK: seguro, desde entonces he decidido evitar un toque tan detallado con las acciones del teclado del usuario. Creo que todo fue mal concebido. –

Deberá gestionar el evento keydown en el enlace.

$("your link selector").keydown(function(evt){ 
    if (evt.which === 9) 
    { 
     if(evt.shiftKey === true) 
     { 
      // user is tabbing backward 
     } 
     else 
     { 
      // User is tabbing forward 
     } 
    } 
});

Marque esta JSFiddle example que detecta delante y hacia atrás de tabulación en un enlace particular.

Nota al margen: No ha especificado etiqueta de jQuery en su pregunta al embargo he proporcionado código jQuery en mi respuesta. Como tiene Javascript así como jQuery badges, supongo que será trivial convertir mi código a Javascript puro.

Fuente

2011-05-26 11:02:19

@Robert: seguro, estaba pensando en eso, pero no estaba seguro si detectar la tecla de mayúsculas era un poco frágil. a) ¿Está detectando la clave de mayúsculas un navegador cruzado confiable? b) ¿La pestaña de cambio es siempre la forma en que los usuarios realizan una búsqueda hacia atrás en el documento? La respuesta a esas dos preguntas puede ser sí, pero pensé que debería preguntar si alguien tenía una mejor idea que yo. –

@Paul D. Waite: no funcionará en dispositivos táctiles. Pero para la mayoría de los casos, la solución de Robert es muy buena. – oddy

@Robert: excelente respuesta por cierto, voy a ejecutar su ejemplo a través de algunos navegadores e informar cualquier incompatibilidades al acecho. –

Como una alternativa a una buena solución de Robert, tal vez se puede aprovechar el atributo tabindex? Establecerlo para sus enlaces html y otros elementos "tabbable". Luego verifíquelo en javascript.

solución con tabindex: jsfiddle

Efecto secundario: Los elementos también reaccionarán de clics del ratón. Se comportarán correctamente. Por lo tanto, esto podría ser un buen efecto secundario o un efecto secundario negativo según sus necesidades.

Fuente

2011-05-26 11:18:26 oddy

Usando JavaScript, ¿cómo se puede saber si un usuario está retrocediendo?

Respuesta

Cuestiones relacionadas