gpt4 book ai didi

javascript - AngularJs:在不同的组/表单/div 中使用 TAB 键进行键盘导航

转载 作者:搜寻专家 更新时间:2023-10-31 08:09:46 24 4
gpt4 key购买 nike

我有两个组,我想为它们分开导航,并在按下 Tab 键时在组的最后一个选项卡控件上分开,然后应该重新启动迭代循环并且焦点应该移动到组的初始元素(这将是 0 索引)

在下面给出的示例中,我添加了两个组,在组中我添加了一些文本框并分配了非序列顺序。

问题

  1. 当按下 tab 键焦点在组间移动时
  2. 在最后一个索引上,循环没有重新开始,而是进入了地址栏

注意:我正在制作一个 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 应用。

依赖关系

  1. J查询
  2. 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

注意:

  1. 在每个组中应该始终有一个 0 索引,否则循环将不会重新开始。

  2. 如果跳过任何索引,如 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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com