Question

$(document).on("keyup", function(e) {
    var code = e.which;
    var currentTabIndex = document.activeElement.tabIndex;
    if (code == 40) {
        alert(currentTabIndex);
        //set tabIndex to currentIndex + 1;
    } else if (code == 39) {
        alert(currentTabIndex);
        //set tabIndex to currentIndex + 1;
    }
    else if (code == 38) {
        alert(currentTabIndex);
        //set tabIndex to currentIndex - 1;
    }
    else if (code == 37) {
        alert(currentTabIndex);
        //set tabIndex to currentIndex - 1;
    }
});

请参阅FIDDLE了解演示。

Answer 1

您可以使用.filter()选择具有所需tabIndex的元素，然后使用.focus()，如下所示：

$('*').filter(function() {
    return this.tabIndex == currentTabIndex + 1;
}).focus();

将焦点设置为任何元素，然后按以下演示中的向下箭头：

DEMO

<强>更新

如果活动元素接受文本输入并按下左箭头或右箭头，则可以使用 tabbing 。 以下是完整的代码：

$(document).on("keyup", function(e) {
    var code = e.which,
        elm = document.activeElement, //capture the current element for later
        currentTabIndex = elm.tabIndex,
        nextTabIndex = code == 40 || code == 39 ? currentTabIndex + 1 :
    code == 38 || code == 37 ? currentTabIndex - 1 : null, //calculate next tab index
        isHoriz = code == 39 || code == 37; //Left or right arrow pressed
    $('[tabindex]').filter(function() {
        if( !$(elm).is(':text,textarea') || !isHoriz ) { //Exclude left/right arrow for text inputs
            return this.tabIndex == nextTabIndex;
        }
    })
    .focus();
});

DEMO

Answer 2

我想说只需抓住下一个或上一个tabindex的元素并在其上调用.focus()：

$("[tabindex='" + (currentTabIndex + 1) + "']").focus();

或

$("[tabindex='" + (currentTabIndex - 1) + "']").focus();

Fiddle Here

编辑：

所以你想停止这个功能if（'按下'=''左箭头'或'右箭头'）和'输入类型'=='文字'？然后写一个if语句做那个确切的事情：

if ((code == 39 || code == 37) && $(e.target).attr('type') == "text") return;

将它放在函数的第二行。

如何在给定activeElement tabIndex的keydown或keyup上设置tabIndex？

2 个答案: