How to create tabindex groups?

Question

I am trying to create tabindex groups in which clicking a tab in a group that it always rotates in that group until another group is focused using javascript or manually.

Question: Can this be done without JavaScript, if not the way I can 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 the iframe to be the last to solve this problem, it would be very difficult to implement the iframe at this stage of development in my application.

---

This is what I came up with

This is pretty dirty code, but this is what I came up with. Adding the data-tabgroup and data-tabgroupindex to input will correctly display them without leaving the group.

Like the steveax mentioned in this comment , it is not recommended for users without a keyboard or in any regular situation with the HTML format, where it really is not 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 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 :tababble selector that can help you here.

• Select all the items selected by the last tab of the group.
• Capture input tabs.
• Manually select the first tab you can select.
• (Likewise for the Shift + tab in the first tab selector.)

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