如何创建tabindex组
How to create tabindex groups?
我正在尝试创建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();
}
});
:tababble
选择器,可以在这里为您提供帮助。
- 选择组的所有最后一个选项卡可选择元素
- 捕获选项卡输入
- 手动选择第一个选项卡可选同级
- (对于第一个选项卡可选元素上的Shift+选项卡也是如此。)
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();
}
});
});
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 为effect Composer创建GodRays效果过程
- 从javascript创建一个列表
- onkeyup无法动态创建多个文本区域
- 如何使用javascript从主svg对象动态创建svg视图框
- 如何访问声音管理器2创建的声音对象
- 我已经创建了一个jquery转盘,并使用if条件来运行和停止转盘
- Kendo:我该如何在树视图中创建一个递归的hieiarchy
- 使用Facebook live API创建实时视频对象时的隐私设置
- 在动态创建的元素上获取对特定选择器的引用
- 如何创建带有插槽的vue js组件预加载程序
- 如何在创建键时引用来自同一对象的键
- 如何创建JSON数组
- 从html创建一个指令,该指令按类名应用函数
- 使用Javascript创建测验页面
- 更改使用Chart.js创建的图表中的轴线颜色
- JavaScript名称空间和对象创建
- JQuery对动态创建的对象进行选择
- 创建带有和不带有JavaScript的Bootstrap下拉菜单
- 如何创建tabindex组