javascript - How to create tabindex groups? - Stack Overflow

admin管理员组

文章数量:1297045

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

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

• javascript
• jquery
• css
• html

Share Follow edited May 23, 2017 at 12:25 CommunityBot 111 silver badge asked Aug 31, 2013 at 1:25 skmasqskmasq 4,52177 gold badges4444 silver badges7777 bronze badges 5

• 3 In general it's not wise to muck with the natural tab indices. At best, you'll surprise users; at worst you'll strand users who only navigate with the keyboard (think screenreader users). – steveax Commented Aug 31, 2013 at 1:56
• @steveax I have a SPA where I use tabindex to make div's focus-able. So when I open up filtering input group on the last input I pletely lose where focus is. So in my situation it is very essential I restrict tabs only in this area. – skmasq Commented Aug 31, 2013 at 2:09
• @steveax And I have one group per page, those pages are not displayed at the same time on screen in no way. – skmasq Commented Aug 31, 2013 at 2:10
• It may be appropriate in your case - the "focused manually" line made me think to caution you to remember that not all users have the ability to use a mouse. – steveax Commented Aug 31, 2013 at 2:18
• @steveax Thank you I forgot to think about that. But luckily in my case a mouse is requirement. – skmasq Commented Aug 31, 2013 at 2:28

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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

本文标签： javascriptHow to create tabindex groupsStack Overflow