[英]How to create tabindex groups?
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. 我正在尝试制作tabindex组,其中按下组中的tab总是在该组中旋转,直到另一组通过javascript或手动聚焦。
Question: Is it possible to do this without JavaScript, if not how can I achieve this? 问题:是否可以在没有JavaScript的情况下执行此操作,如果不能,我该如何实现?
HTML code : HTML代码 :
<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. 编辑:我更喜欢iframe是最后的解决方案,在我的应用程序的这个开发阶段实现iframe非常困难。
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. 将
data-tabgroup
和data-tabgroupindex
到input
元素将正确地标记它们而不会离开组。
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. 正如史蒂威克斯在本评论中指出的那样,对于没有键盘的用户或任何不需要的常规HTML形式的情况,不建议这样做。
Example in jsFiddle jsFiddle中的示例
Used libraries : 二手图书馆 :
HTML Code: HTML代码:
<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: 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();
}
});
JQuery UI has a the :tababble
selector which could help you out here. JQuery UI有一个
:tababble
选择器可以帮助你在这里。
$(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();
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.