我希望能够使用箭头键浏览网页上所有可聚焦的元素。因此，当按下向下键时，焦点应转移到当前聚焦元素下方的可聚焦元素。你会得到其他箭头键的想法，当没有可聚焦的元素可以转移到时，焦点应该保持不变。
这是我到目前为止得到的：
$(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
}）;
这个想法是获得所有可聚焦的元素，然后选择适合箭头和转移焦点的元素。
我无法让这段代码工作（它包含一个错误），我也不完全确定它甚至会起作用。
提前感谢
[编辑]：我想我有点含糊不清。我不仅要左走和走右，还要上下走。
我会做的要简单得多。只需在应该具有此功能的对象中添加一个公共类（f.ex."移动"）并使用：
$(document).keydown(
function(e)
{
if (e.keyCode == 39) {
$(".move:focus").next().focus();
}
if (e.keyCode == 37) {
$(".move:focus").prev().focus();
}
}
);
请参阅示例：http://jsfiddle.net/uJ4PJ/
这段代码要简单得多，希望具有您需要的所有功能。
只需确保控件的顺序正确，否则将无法正常工作。
经过多次试验和错误，我开发了以下代码：
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);
}
});
向右箭头充当制表符
左箭头充当 Shift 选项卡
预览 - 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');
}
});
上面通过检查一些文章和堆叠流链接来实现
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/
这很好用
$('p').each(function(index) {
$(this).attr('tabindex', index)
}).on('keyup', function(e) {
e.preventDefault;
if (e.keyCode == 39) {
$('[TabIndex="' + Number(Number($(this).attr('tabindex')) + 1) + '"]').focus();
}
if (e.keyCode == 37) {
$('[TabIndex="' + Number(Number($(this).attr('tabindex')) - 1) + '"]').focus();
}
});
以上解决方案都不适合我。这个是我的。这看起来很困难，但实际上真的很容易。创建链接array并使用数组index更改焦点。（我需要向上/向下箭头，所以键码不同）。它也适用于dynamicly添加的链接（因为我需要这种方式，这就是我使用 on 的原因）
$('#links_container').on("keydown", ".link",
function(e)
{
//start - list of <a>
var flag = false;
var smallMeni = document.getElementById('links_container');
var allElements2 = smallMeni.getElementsByTagName('a'); //.link
//end
//start - key down
if (e.keyCode == 40)
{
for (var i=0;i<allElements2.length;i++)
{
if(flag == true){
flag = false
allElements2[i].focus();
//alert(i)
}
else
{
if ( document.activeElement === allElements2[i] )
{
//alert(i);
flag = true;
}
}
}
}
//end
//start - key up
if (e.keyCode == 38)
{
for (var i=0;i<allElements2.length;i++)
{
if ( document.activeElement === allElements2[i] )
{
if (i>0)
{
allElements2[i-1].focus();
}
}
}
}
//alert(i);
}
);