javascript - 在 JavaScript 中使用箭头键移动焦点

Question

我希望能够使用箭头键浏览我网页上所有可聚焦的元素。因此，当按下向下键时，焦点应该转移到当前聚焦元素下方的可聚焦元素。您了解其他箭头键的想法，当没有要转移到的可聚焦元素时，焦点应保持不变。

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

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

});

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

我无法让这段代码工作(它包含一个错误)，而且我不能完全确定它是否会工作。

提前致谢

[编辑]:我想我有点含糊。我不仅要左右走，还要上下走。

Answer 1

我要做的要简单得多。只需在应该具有此功能(例如“移动”)的对象中添加一个公共(public)类并使用:

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

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

        }
    }
);
​

参见示例:http://jsfiddle.net/uJ4PJ/

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

只需确保控件的顺序正确，否则将无法正常工作。