我正在尝试创建 tabindex 组,其中在一个组中按 tab 它总是在该组中旋转,直到另一个组通过 javascript 或手动聚焦。
问题:是否可以在没有 JavaScript 的情况下做到这一点,如果不能,我该如何实现?
这是jsFiddle
HTML 代码:
<fieldset>
<input tabindex="1"/>
<input tabindex="2"/>
</fieldset>
<fieldset>
<input tabindex="1"/>
<input tabindex="2"/>
</fieldset>
编辑:我希望 iframe 是解决这个问题的最后手段,在我的应用程序的这个开发阶段很难实现 iframe。
这就是我想出的
这是非常混乱的代码,但这就是我想出的。添加data-tabgroup
和data-tabgroupindex
到input
元素将正确地标记它们而不会离开组。
正如steveax在此评论中指出的那样,不建议没有键盘的用户或在实际上没有必要的任何常规 HTML 表单情况下这样做。
jsFiddle
使用的库中的示例:
- lodash.js
- jQuery 1.8.3
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 代码:
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();
}
});