Shift Focus za pomocą klawiszy strzałek w JavaScript

Question

Chcę móc nawigować po wszystkich elementach, które można aktywować na mojej stronie za pomocą klawisza strzałki. Więc gdy naciśnięty zostanie klawisz "w dół", fokus powinien przejść do elementu, który można ustawić, pod bieżącym, skupionym elementem. Masz pomysł na inne klawisze strzałek, gdy nie ma elementu, na który można przesunąć fokus, fokus powinien pozostać taki sam.

To, co mam do tej pory:

$(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 

});

pomysł polegał na tym, aby uzyskać wszystkie możliwe do ustawienia elementy, a następnie wybrać taki, który pasuje do strzałki i fokusa shift.

Nie mogę uruchomić tego kodu (zawiera błąd) i nie jestem całkowicie pewien, że zadziała.

thnx z góry

[EDIT]: Chyba był trochę niejasne. Nie chcę tylko iść w lewo i w prawo, ale także w górę iw dół.

Answer 1

To, co chciałbym zrobić, jest znacznie prostsze. Wystarczy dodać wspólną klasę wśród obiektów, które powinny mieć tę funkcję (f.ex. „Move”) i zastosowanie:

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

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

     } 
    } 
); 
​ 

Patrz przykład: http://jsfiddle.net/uJ4PJ/

Ten kod jest znacznie prostsze i miejmy nadzieję ma cała funkcjonalność, której potrzebujesz.

Tylko upewnij się, że elementy sterujące są we właściwej kolejności lub nie będzie działać poprawnie.

Answer 2

podgląd - 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

Po wielu próbach i błędach, opracowałem ten kod, który działa:

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); 
    } 
}); 

prawo strzałek działa jak zakładki

lewe akty strzałek jako kartę zmianowym

Answer 4

Wdrożone powyżej zaznaczając kilka artykułów i stosu nad przepływem linki

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/