Thay đổi tiêu điểm bằng các phím mũi tên trong JavaScript

Question

Tôi muốn có thể điều hướng qua tất cả các yếu tố có thể đặt tiêu điểm trên trang web của mình bằng phím mũi tên. Vì vậy, khi nhấn phím xuống, tiêu điểm sẽ chuyển sang phần tử có thể lấy nét bên dưới phần tử tập trung hiện tại. Bạn có ý tưởng cho các phím mũi tên khác, khi không có một yếu tố có thể tập trung để chuyển sang, tiêu điểm phải giữ nguyên.

Đây là những gì tôi có cho đến nay:

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

});

ý tưởng là lấy tất cả các yếu tố có thể tập trung và chọn chọn một yếu tố phù hợp cho mũi tên và tiêu điểm dịch chuyển.

Tôi không thể làm cho mã này hoạt động (có chứa lỗi) và tôi không hoàn toàn chắc chắn mã này sẽ hoạt động.

Thnx trước

[EDIT]: Tôi đoán tôi hơi mơ hồ. Tôi không chỉ muốn đi bên trái và bên phải, mà còn lên xuống.

Answer 1

Điều tôi sẽ làm đơn giản hơn rất nhiều. Chỉ cần thêm một lớp phổ biến trong các đối tượng người nên có chức năng này (f.ex. "di chuyển") và sử dụng:

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

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

     } 
    } 
); 
​ 

Xem ví dụ: http://jsfiddle.net/uJ4PJ/

Mã này là nhiều đơn giản hơn và hy vọng có tất cả các chức năng bạn cần.

Chỉ cần đảm bảo các điều khiển theo đúng thứ tự hoặc cách này sẽ không hoạt động bình thường.

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

Sau nhiều thử và sai, tôi đã phát triển mã này hoạt động:

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

mũi tên phải hoạt động như tab

mũi tên hành vi trái như tab thay đổi

Answer 4

thực hiện ở trên bằng cách kiểm tra một số bài báo và ngăn xếp trên dòng chảy liên kết

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/