How to create tabindex groups?

Question

I'm trying to make tabindex groups where pressing tab in a group it allways rotates in that group until the other group is focused via javascript or manually.

Question: Is it possible to do this without JavaScript, if not how can I achieve this?

Here is jsFiddle

HTML code:

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

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

EDIT: I would prefer iframe to be last resort to solve this, it would be very hard to implement iframe at this stage of development in my application.

---

This is what I came up

This is pretty messy code, but this is what I came up. Adding data-tabgroup and data-tabgroupindex to input elements will correctly tab them without going out of the group.

As steveax pointed out in this comment this is not suggested for users without keyboards or in any regular HTML form situation where this isn't really necessary.

Example in jsFiddle
Used libraries:

• lodash.js
• jquery 1.8.3

HTML Code:

<div>
    <input data-tabgroup="first" data-tabgroupindex="1" />
    <input data-tabgroup="first" data-tabgroupindex="2" />
    <input data-tabgroup="first" data-tabgroupindex="3" />
    <input data-tabgroup="first" data-tabgroupindex="4" />
</div>
<div>
    <input data-tabgroup="second" data-tabgroupindex="1" />
    <input data-tabgroup="second" data-tabgroupindex="3" />
    <input data-tabgroup="second" data-tabgroupindex="2" />
    <input data-tabgroup="second" data-tabgroupindex="4" />
</div>

JavaScript code:

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();
    }
});

Answer 1

JQuery UI has a the :tababble selector which could help you out here.

1. Select all the last tab selectable elements of a group.
2. Capture the tab input.
3. Manually select the first tab selectable sibling.
4. (Likewise for Shift + tab on first tab selectable element.)

JSFiddle

JavaScript

$(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();
        } 
    });
});