Enfoque de desplazamiento con las teclas de flecha en JavaScript

Question

Deseo navegar a través de todos los elementos enfocables en mi página web con la tecla de flecha. Entonces, cuando se presiona la tecla descendente, el foco debe cambiar al elemento enfocable debajo del elemento enfocado actual. Obtienes la idea para las otras teclas de flecha, cuando no hay un elemento enfocable para cambiar, el foco debe permanecer igual.

Esto es lo que tengo hasta ahora:

$(document).keydown(function(e){  

if (e.keyCode == 37) { //left 

    var offset = $("*:focus").offset(); 

    var allElements = $("#container").find('a[href], area[href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), button:not([disabled]), iframe, object, embed, *[tabindex], *[contenteditable]'); 

    var arr = jQuery.makeArray(allElements); 

    var topLeft = offset.left 
    var minus = topLeft; 
    var currentElement = $("*:focus"); 

    for(var i = 0; i < arr.length; i++) 
    { 

     if ((arr[i].offset().left < offset.left) // This doesn't work for some reason 
     && ((offset.left - arr[i].offset().left) < minus)) 
     { 
     currentElement = arr[i]; 
     minus = offset.left - arr[i].offset().left; 
     topLeft = arr[i].offset().left; 
     } 


     currentElement.focus(); 
    } 


    alert("left pressed"); 
    return false; 
} 

// Other Keys 

});

la idea era obtener todos los elementos enfocables y seleccionar seleccionar el que sea adecuado para la flecha y el enfoque de desplazamiento.

No consigo que este código funcione (contiene un error) y no estoy completamente seguro de que funcione.

Thnx de antemano

[EDIT]: Creo que estaba un poco vago. No solo quiero ir hacia la izquierda y hacia la derecha, sino también hacia arriba y hacia abajo.

Answer 1

Lo que yo haría es mucho más simple. Sólo tiene que añadir una clase común entre los objetos que deben tener esta funcionalidad (por ejemplo salir "movimiento") y el uso:

$(document).keydown(
    function(e) 
    {  
     if (e.keyCode == 39) {  
      $(".move:focus").next().focus(); 

     } 
     if (e.keyCode == 37) {  
      $(".move:focus").prev().focus(); 

     } 
    } 
); 
​ 

Ver ejemplo: http://jsfiddle.net/uJ4PJ/

Este código es mucho más simple y es de esperar tiene toda la funcionalidad que necesitas

Solo asegúrese de que los controles estén en el orden correcto o esto no funcionará correctamente.

Answer 2

Preview - http://jsfiddle.net/FehKh/;)

html:

<a href='jqwja' class="focusable">jajaj</a> 
<a href='jjaasd' class="focusable focused">jajasdaaj</a> 
<a href='jjqwea' class="focusable">jajaacasj</a> 
<input value='iddqd' name="DoomII" class="focusable" />​ 

JS:

// init 
$('.focused').focus(); 

// actual code 
$(document).keydown(function(e){  
    if (e.keyCode == 37) { // left 
     if($('.focused').prev('.focusable').length) 
      $('.focused').removeClass('focused').prev('.focusable').focus().addClass('focused'); 
    } 
    if (e.keyCode == 39) { // right 
     if($('.focused').next('.focusable').length) 
      $('.focused').removeClass('focused').next('.focusable').focus().addClass('focused'); 
    } 
});​ 

Answer 3

Después de mucho ensayo y error, he desarrollado este código que funciona:

function navigate(origin, sens) { 
    var inputs = $('#form').find('input:enabled'); 
    var index = inputs.index(origin); 
    index += sens; 
    if (index < 0) { 
     index = inputs.length - 1; 
    } 
    if (index > inputs.length - 1) { 
     index = 0; 
    } 
    inputs.eq(index).focus(); 
} 

$('input').keydown(function(e) { 
    if (e.keyCode==37) { 
     navigate(e.target, -1); 
    } 
    if (e.keyCode==39) { 
     navigate(e.target, 1); 
    } 
}); 

flecha de la derecha actúa como pestaña

de flecha izquierda, actúa como pestaña cambio

Answer 4

implementado anteriormente por el control de algunos artículos y la pila sobre el flujo de enlaces

jQuery.fn.elementAfter = function(other) { 
for(i = 0; i < this.length - 1; i++) { 
    if (this[i] == other) { 
     return jQuery(this[i + 1]); 
    } 
} 
return jQuery; 
} ; 

jQuery.fn.elementBefore = function(other) { 
if (this.length > 0) {    
    for(i = 1; i < this.length; i++) { 
     if (this[i] == other) { 
      return jQuery(this[i - 1]); 
     } 
    } 
} 
return jQuery; 
}; 

https://jsfiddle.net/bkLnq5js/79/