在< li>中实现键盘导航使用AngularJS的列表 [英] Implement keyboard navigation in <li> lists using AngularJS
本文介绍了在< li>中实现键盘导航使用AngularJS的列表的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我使用$ http服务生成自动完成功能,以获取相关输入的所有数据,如果我使用鼠标,它的工作正常。但是,它中没有键盘导航。我只是想在选项列表上启用向上和向下箭头移动并在Enter上选择。
I have used $http service to generate autocomplete to fetch all data of relevant input and its working fine if I am using it with mouse. However, there is no keyboard navigation present in it. I just want to enable up and down arrow movement on the list of options and selection on Enter.
<div class="compare-col-head head-pos">
<h1 class="museo_sans900" ng-hide="hideSearch">Add player</h1>
<form name="addPlayer1" class="search-form padd-none" ng-hide="hideSearch">
<div class="form-group museo_sans300">
<input type="search" ng-model="search1" class="form-control" placeholder="Search" ng-change="search(1,search1)">
<a href="javascript:void(0)"><i class="fa fa-search search-pos search-icon"></i></a></div>
<ul ng-show="ulShow" class="col-td museo_sans300 playerListUL">
<li class="searchPlayerList" ng-repeat="plyer in playerList" ng-click="selectPlayer(plyer,1)"> {{plyer.PlayerName}} </li>
</ul>
</form>
<div class="team-kit" ng-show="hideSearch"><img ng-src="{{playerDetails.KitURL}}" alt=""/></div>
<div class="team-data" ng-show="hideSearch">
<h1>{{playerDetails.PlayerName}}</h1>
<h2>{{playerDetails.TeamName}}</h2>
<h3>{{playerDetails.fullRole}}</h3>
<h4>Season points: <span>{{playerDetails.Points == undefined? 0: playerDetails.Points}}</span></h4>
<h4>Player Cost: <span>$100</span></h4>
</div>
</div>
我已经尝试搜索了很多但是找不到适合我情景的解决方案。
I have already tried to search a lot but didn't able to find a solution that fits my scenario.
推荐答案
我为你做了一个小小提琴,测试你需要点击第一个元素(因为它嵌入在这个网站)
I did a small fiddle for you, to test it you need to click on first element (because it is embedded in this site)
document.onkeydown = function(evt) {
evt = evt || window.event;
switch (evt.keyCode) {
case 38:
document.activeElement.previousElementSibling.focus();
break;
case 40:
document.activeElement.nextElementSibling.focus();
break;
}
};
li:focus{
border: 1px solid red;
}
<ul>
<li tabIndex="0">item 1</li>
<li tabIndex="0">item 2</li>
<li tabIndex="0">item 3</li>
<li tabIndex="0">item 4</li>
<li tabIndex="0">item 5</li>
<li tabIndex="0">item 6</li>
<li tabIndex="0">item 7</li>
<li tabIndex="0">item 8</li>
</ul>
这篇关于在< li>中实现键盘导航使用AngularJS的列表的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文