javascript - 给定 activeElement tabIndex，如何在 keydown 或 keyup 上设置 tabIndex？

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

更新

如果事件元素接受文本输入并且左箭头 或右箭头 被按下，您将如何防止制表符。 完整代码如下:

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