使用JavaScript中的箭头键转移焦点

I want to be able to navigate through all the focusable elements on my webpage with the arrow key. So when the down-key is pressed the focus should shift to the focusable element beneath the current focussed element. You get the idea for the other arrow keys, when there is not a focusable element to shift to, the focus should remain the same.

我想用箭头键导航我网页上所有可聚焦的元素。因此，当按下向下键时，焦点应该转移到当前焦点元素下面的可聚焦元素。您得到了其他箭头键的想法，当没有可调焦元素时，焦点应该保持不变。

This is what I got so far:

这是我到目前为止得到的:

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

});

the idea was to get all the focus-able elements and than pick select the one that is suited for the arrow and shift focus.

我们的想法是获得所有可聚焦的元素，而不是选择一个适合箭头和转移焦点的元素。

I'm not able to get this code to work (it contains a error) and I'm not completly sure it will even work.

我不能让这段代码起作用(它包含一个错误)，而且我也不能完全确定它是否能正常工作。

Thnx in advance

提前感谢

[EDIT]: I guess I was a little vague. I do not only want to go left and right, but also up and down.

我想我有点含糊不清。我不仅要向左和向右，还要向上和向下。

4 个解决方案

#1

What I would do is much simpler. Just add a common class among the objects who should have this functionality (f.ex. "move") and use:

我要做的事情要简单得多。只需在应该具有此功能的对象中添加一个公共类(f.ex)。“移动”)和使用:

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

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

        }
    }
);

See example: http://jsfiddle.net/uJ4PJ/

看到示例:http://jsfiddle.net/uJ4PJ/

This code is much simpler and hopefully has all the functionality you need.

这段代码要简单得多，希望有您需要的所有功能。

Just make sure the controls are in the correct order or this won't work properly.

只要确保控件的顺序正确，否则就不能正常工作。

#2

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

预览- http://jsfiddle.net/FehKh/,)

html:

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:

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

#3

After much trial and error, I developed this code that works :

经过多次尝试和错误，我开发了这个代码，可以工作:

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

right arrow acts as tab

右箭头作为选项卡

left arrow acts as shift tab

左箭头作为shift选项卡

#4

Implemented above by checking some articles and stack over flow links

通过在流链接上检查一些文章和堆栈来实现

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/

#1