Javascript 如何创建选项卡索引组？

我正在尝试创建tabindex组，其中在一个组中按tab键，它会一直在该组中旋转，直到另一个组通过javascript或手动聚焦

问题：在没有JavaScript的情况下是否可以做到这一点，如果不能，我如何实现

这是

HTML代码：

<fieldset>
    <input tabindex="1"/>
    <input tabindex="2"/>
</fieldset>

<fieldset>
    <input tabindex="1"/>
    <input tabindex="2"/>
</fieldset>

JavaScript代码：

function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}
$(document).on('keydown', '[data-tabgroup]', function (e) {
    // TODO
    // Get elements tabgroup [DONE]
    // Find element position by tabgroupindex
    // Check if pressed shift+tab or tab
    // Check if it's first or the last element
    // Check which is next element to focus
    // Focus appropriate element

    if (e.which === 9) {

        var indexNode = $(e.target);
        var nodeIndex = indexNode.data("tabgroupindex");
        var tabgroup = indexNode.data("tabgroup");
        var tabgroupNodes = $("[data-tabgroup='" + tabgroup + "']");
        var tabgroupIndexes = [];
        _.each(tabgroupNodes, function (item) {
            tabgroupIndexes.push(+$(item).data("tabgroupindex"));
        });
        tabgroupIndexes = _(tabgroupIndexes).compact()
            .sortBy(function (num) {
            return num;
        }).value();
        if (isNumber(nodeIndex)) {
            if (e.which === 9) if (e.shiftKey) {
                var nextElement = tabgroupIndexes[tabgroupIndexes.indexOf(nodeIndex) - 1];
                if (typeof(nextElement) === "undefined") {
                    $("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[tabgroupIndexes.length - 1] + "']").focus();
                    console.log($("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[tabgroupIndexes.length - 1] + "']").get(0));
                } else {
                    $("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + nextElement + "']").focus();
                }
            } else {

                var nextElement = tabgroupIndexes[tabgroupIndexes.indexOf(nodeIndex) + 1];

                if (typeof(nextElement) === "undefined") {
                    console.log("Im in ")
                    $("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[0] + "']").focus();
                    console.log($("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[0] + "']").get(0))
                } else {
                    $("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + nextElement + "']").focus();
                }
            }

        } else {
                $("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[0] + "']").focus();

        }
        e.preventDefault();
    }
});

jQueryUI有一个选择器，可以在这里帮助您

选择组中最后一个选项卡的所有可选元素

捕获选项卡输入

手动选择第一个选项卡可选同级

（对于第一个tab可选元素上的Shift+tab也是如此。）

JavaScript

---

一般来说，使用自然标签索引是不明智的。充其量，你会让用户大吃一惊；在最坏的情况下，你会束缚那些只使用键盘导航的用户（想想屏幕阅读器用户）。@steveax我有一个SPA，在那里我使用tabindex使div能够聚焦。所以，当我打开最后一个输入的过滤输入组时，我完全失去了焦点。因此，在我的情况下，我只在这个区域限制制表符是非常必要的。@steveax和我每页有一组，这些页面不会同时显示在屏幕上。这可能适合您的情况——“手动聚焦”这句话让我想提醒你们记住，并不是所有的用户都能使用鼠标。@steveax谢谢你们，我忘了考虑这个问题。但幸运的是，我需要一只鼠标。谢谢，这是我首先要找的。

function isNumber(n) {
    return !isNaN(parseFloat(n)) && isFinite(n);
}
$(document).on('keydown', '[data-tabgroup]', function (e) {
    // TODO
    // Get elements tabgroup [DONE]
    // Find element position by tabgroupindex
    // Check if pressed shift+tab or tab
    // Check if it's first or the last element
    // Check which is next element to focus
    // Focus appropriate element

    if (e.which === 9) {

        var indexNode = $(e.target);
        var nodeIndex = indexNode.data("tabgroupindex");
        var tabgroup = indexNode.data("tabgroup");
        var tabgroupNodes = $("[data-tabgroup='" + tabgroup + "']");
        var tabgroupIndexes = [];
        _.each(tabgroupNodes, function (item) {
            tabgroupIndexes.push(+$(item).data("tabgroupindex"));
        });
        tabgroupIndexes = _(tabgroupIndexes).compact()
            .sortBy(function (num) {
            return num;
        }).value();
        if (isNumber(nodeIndex)) {
            if (e.which === 9) if (e.shiftKey) {
                var nextElement = tabgroupIndexes[tabgroupIndexes.indexOf(nodeIndex) - 1];
                if (typeof(nextElement) === "undefined") {
                    $("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[tabgroupIndexes.length - 1] + "']").focus();
                    console.log($("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[tabgroupIndexes.length - 1] + "']").get(0));
                } else {
                    $("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + nextElement + "']").focus();
                }
            } else {

                var nextElement = tabgroupIndexes[tabgroupIndexes.indexOf(nodeIndex) + 1];

                if (typeof(nextElement) === "undefined") {
                    console.log("Im in ")
                    $("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[0] + "']").focus();
                    console.log($("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[0] + "']").get(0))
                } else {
                    $("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + nextElement + "']").focus();
                }
            }

        } else {
                $("[data-tabgroup='" + tabgroup + "'][data-tabgroupindex='" + tabgroupIndexes[0] + "']").focus();

        }
        e.preventDefault();
    }
});

$(function(){
    // Listen for TAB on last child.
    $('fieldset :tabbable:last-child').on('keydown', function(e) {
        if (e.which == 9) {
            e.preventDefault();
            $(this).siblings(':tabbable').eq(0).focus();
        } 
    });

    // Listen for SHIFT + TAB on first child.
    $('fieldset :tabbable:first-child').on('keydown', function(e) {
        if (e.shiftKey && e.which == 9) {
            e.preventDefault();
            $(this).siblings(':tabbable').eq(-1).focus();
        } 
    });
});