我有两个组，我想为它们分开导航，并在按下 Tab 键时在组的最后一个选项卡控件上分开，然后应该重新启动迭代循环并且焦点应该移动到组的初始元素(这将是 0 索引)
在下面给出的示例中，我添加了两个组，在组中我添加了一些文本框并分配了非序列顺序。
问题
- 当按下 tab 键焦点在组间移动时
- 在最后一个索引上，循环没有重新开始，而是进入了地址栏
注意:我正在制作一个 angularjs 应用程序，这只是一个虚拟对象，可以清楚地显示我的问题
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div role="group" tabindex="-1">
<h1>Group 1</h1>
<br>
<input type="text" tabindex="1" />
<br>
<input type="text" tabindex="6" />
<br>
<input type="text" tabindex="4" />
<br>
<input type="text" tabindex="2" />
<br>
<input type="text" tabindex="5" />
<br>
<input type="text" tabindex="2" />
<br>
<button tabindex="7">Submit</button>
</div>
<hr>
<div>
<div role="group" tabindex="-1">
<h1>Group 2</h1>
<br>
<input type="text" tabindex="1" />
<br>
<input type="text" tabindex="6" />
<br>
<input type="text" tabindex="4" />
<br>
<input type="text" tabindex="2" />
<br>
<input type="text" tabindex="5" />
<br>
<input type="text" tabindex="2" />
<br>
<button tabindex="7">Submit</button>
</div>
</div>
</body>
</html>最佳答案
非常感谢@Kiran Nawale 和@Gökhan Kurt 指导我找到解决方案。
我已经创建了一个通用指令，可重复用于任何 Angular 应用。
依赖关系
- J查询
- AngularJs
在指令中，我添加了注释，它们将指导您完成指令的工作方式。
如何使用？
在您的元素中添加以下给定的属性和指令
tab-man tab-index="0" tab-group="g1"
tab-man : the directive
tab-index : it is the index of the element in the group
tab-group : name of the group
注意:
在每个组中应该始终有一个
0索引，否则循环将不会重新开始。如果跳过任何索引，如
0,1,2,4...(跳过3)，则在 2 之后焦点移动到0
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script>
var app = angular.module('myapp', []); /// angular app
app.directive('tabMan', function() { ///directive
return {
restrict: 'A', /// accessible only by attribute
scope: {}, /// scope is not needed
link: function(scope, element, attrs) { ///link function to add key-down event on the target element
var gotoElement = function(grp, idx) {
/// get next element
var nextElement = $("input[tab-group='" + grp + "'][tab-index='" + idx + "']")[0];
/// if there is not next element then go to the 0 index
if (nextElement == undefined) {
if (idx != 0) { /// if the index is 0 then do not do any thing
gotoElement(grp, 0); /// restart the cycle
}
} else {
nextElement.focus(); /// succesfully give focus to the next
}
};
var tabIndex = attrs.tabIndex;
var tabGroup = attrs.tabGroup;
$(element).keydown(function(event) {
if (event.keyCode == 9) { /// go inside if tab key is pressed
var tIdx = $(event.target).attr("tab-index"); /// get the current index of element
var nextTid = parseInt(tIdx.toString()) + 1; /// get the next index of element
nextTid = Number(nextTid); /// turn the index into number
var tGrp = $(event.target).attr("tab-group"); /// get the group of the element
gotoElement(tGrp, nextTid); /// go to the next element
/// the work of tab is done by the directive so remove the default and stop the bubbeling
event.stopPropagation()
event.preventDefault();
}
});
}
};
});
</script>
</head>
<body ng-app="myapp">
<div role="group" tabindex="-1">
<h1>Group 1</h1>
<br>
<input type="text" tab-man tab-index="0" tab-group="g1" />
<br>
<input type="text" tab-man tab-index="5" tab-group="g1" />
<br>
<input type="text" tab-man tab-man tab-index="2" tab-group="g1" />
<br>
<input type="text" tab-man tab-index="3" tab-group="g1" />
<br>
<input type="text" tab-man tab-index="4" tab-group="g1" />
<br>
<input type="text" tab-man tab-index="1" tab-group="g1" />
<br>
<button>Submit</button>
</div>
<hr>
<div>
<div role="group" tabindex="-1">
<h1>Group 2</h1>
<br>
<input type="text" tab-man tab-index="0" tab-group="g2" />
<br>
<input type="text" tab-man tab-index="5" tab-group="g2" />
<br>
<input type="text" tab-man tab-man tab-index="2" tab-group="g2" />
<br>
<input type="text" tab-man tab-index="3" tab-group="g2" />
<br>
<input type="text" tab-man tab-index="4" tab-group="g2" />
<br>
<input type="text" tab-man tab-index="1" tab-group="g2" />
<br>
<button>Submit</button>
</div>
</div>
</body>关于javascript - AngularJs:在不同的组/表单/div 中使用 TAB 键进行键盘导航，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37019509/