jquery - jQuery 自定义保管箱：如何使用 tabindex

Question

我正在使用 jQuery 自定义我自己的保管箱，但想知道如何将 tabindex 应用到它。

我尝试使用隐藏的选择焦点/模糊事件，但似乎不起作用。

我还尝试将 tabindex 属性应用于我的自定义保管箱（一个 div），但没有成功。

有人可以提供示例或链接来告诉我如何实现这一目标吗？

谢谢

Answer 1

我想你可以有一个变量 - 当前选定的项目。您只需捕获用户键盘事件并通过将类添加/删除到相应的 div 来更改当前选定的项目。当按下回车键时，根据当前选中的项目调用需要的事件。

某种伪代码：

var current = 0;

if(key = down){
    current++;
    currentElem.removeClass('active');
    currentElemen = currentElem.next();
    currentElem.addClass('active');
}

if(key = up){
    current--;
    currentElem.removeClass('active');
    currentElemen = currentElem.previous();
    currentElem.addClass('active');
}

if(key = enter){
    doStuff(current);
}

希望这能给你一个想法！

Answer 2

我不确定我是否完全理解你的目标，但也许这会让你开始：http: //jsfiddle.net/2rCFV/1/

$(window).keydown(function(e){
    if(e.which === 9){ //tab
        var selected = $('.selected');
        selected.removeClass('selected');

        var tabIndex = +selected.attr('tabIndex') + 1; //plus sign at beginnign converts it to a number

        var next = selected.siblings('[tabIndex=' + tabIndex + ']');

        if(next.length > 0){ //if this element exists
            next.addClass('selected');
        }else{
            selected.siblings('[tabIndex=' + 1 + ']').addClass('selected'); //select the first one
        }

        e.preventDefault();
    }
});