我有一个项目列表的表格,我希望能够使用键盘上下按钮来滚动它。目前我可以通过tabindex属性在列表中向下移动并达到类似的效果。同时我也使用ng repeat生成元素的实例。是否有什么提示或线索可以帮助我通过使用上下箭头键来实现对列表进行聚焦和滚动的操作?
以下是示例代码:
我修改了你的checkKey函数,使其变成了这个:
以下是示例代码:
table ng-if="!toolbarCtrl.loadingContacts" class="table dataTable hover" id="table3">
<tbody role="alert" aria-live="polite" aria-relevant="all">
<tr class="pointer" tabindex="0" ng-repeat="contact in toolbarCtrl.contactEntities | filter:toolbarCtrl.toolbarSearchStringAfterDelay | orderBy: toolbarCtrl.tab == toolbarCtrl.tabs.RECENT ? '-dateSeen' : (toolbarCtrl.tab == toolbarCtrl.tabs.ALL ? '+data.fileAs' : '')"
ng-class="" ng-if="toolbarCtrl.toolbarSearchStringAfterDelay" ng-click="toolbarCtrl.selectContact(contact)">
<td rel="popover_dark" ng-class="contact.loading ? 'contactDisabled' : '' " data-container="body" data-toggle="popover" data-placement="right" data-content="" data-original-title="" title="" class="sorting_1 has_popover">
</td>
</tr>
</tbody>
</table>
我修改了你的checkKey函数,使其变成了这个:
controller.checkKey = function (event) {
$("tr[tabindex=0]").focus();
var event = window.event;
if (event.keyCode == 40) { //down
var idx = $("tr:focus").attr("tabindex");
idx++;
if (idx > 6) {
idx = 0;
}
$("tr[tabindex=" + idx + "]").focus();
}
if (event.keyCode == 38) { //up
var idx = $("tr:focus").attr("tabindex");
idx--;
if (idx < 0) {
idx = 6;
}
$("tr[tabindex=" + idx + "]").focus();
}
}
我离成功很近,但它直接跳到了最后一个元素。这个代码看起来对吗?