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 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:
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();
}
});
Yes. It is useful. The most useful values are tabindex="0" for example on <span/> or <div/> element and tabindex="-1" to disable tab stops or make elements focusable without tab-navigation. I created HTML+CSS libraries that use this.
A negative value (usually tabindex="-1" ) means that the element is not reachable via sequential keyboard navigation, but could be focused with JavaScript or visually by clicking with the mouse. It's mostly useful to create accessible widgets with JavaScript.
JQuery UI has a the :tababble
selector which could help you out here.
JSFiddle
$(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();
}
});
});
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With