仅使用键盘导航 UI [英] Navigate the UI using only keyboard
问题描述
我正在尝试仅使用键盘浏览记录列表.页面加载时，默认的焦点"应该在第一条记录上，当用户点击键盘上的向下箭头时，需要聚焦下一条记录.当用户单击向上箭头时，应聚焦前一条记录.当用户单击 Enter 按钮时，应将他们带到该记录的详细信息页面.
AngularJS 在 1.1.5(不稳定)中似乎支持此功能，我们无法在生产中使用它.我目前使用 1.0.7.我希望做这样的事情 - 应该在文档级别处理密钥.当用户按下某个键时，代码应该在允许的键数组中查找.如果找到匹配项(例如向下键代码)，它应该将焦点(应用 .highlight css)移动到下一个元素.当按下回车键时，它应该抓取 .highlight css 的记录并获取记录 ID 以进行进一步处理.
谢谢！
以下是您可以选择执行的示例:http://plnkr.co/edit/XRGPYCk6auOxmylMe0Uu?p=preview
<div ng-controller="testCtrl"><li ng-repeat="记录在记录中"><div 类=记录"ng-class="{'record-highlight': record.navIndex == focu sIndex}">{{ 记录名称 }}这是我能想到的最简单的方法.它将指令 keyTrap 绑定到捕获 keydown 事件的 body 和$broadcast 消息到子作用域.元素持有者范围将捕获消息并简单地增加或减少如果点击 enter，则 focusIndex 或触发 open 函数.
编辑
http://plnkr.co/edit/rwUDTtkQkaQ0dkIFflcy?p=preview
现在支持，有序/过滤列表.
事件处理部分没有改变，但现在使用 $index 和过滤列表缓存技术相结合以跟踪哪个项目获得关注.
I'm trying to navigate thru a list of records using only keyboard. When the page loads, the default "focus" should be on the first record, when the user clicks the down arrow on the keyboard, the next record needs to be focused. When the user clicks the up arrow, the previous record should be focused. When the user clicks the Enter button, it should take them to the details page of that record.
Here's what I have so far on Plunkr.
It appears that this is supported in AngularJS in 1.1.5 (unstable), which we can't use in production. I'm currently using 1.0.7. I'm hoping to do something like this - the key should be handled at the document level. When the user presses a certain key, the code should look up in an array of allowed keys. If a match is found (e.g. down key code), it should move the focus (apply the .highlight css) to the next element. When enter is pressed, it should grab the record which .highlight css and get the record id for further processing.
Thank you!
Here is the example what you could choose to do: http://plnkr.co/edit/XRGPYCk6auOxmylMe0Uu?p=preview
<body key-trap>
<div ng-controller="testCtrl">
<li ng-repeat="record in records">
<div class="record"
ng-class="{'record-highlight': record.navIndex == focu sIndex}">
{{ record.name }}
</div>
</li>
</div>
</body>
This is the simplest approach I could think of.
It binds a directive keyTrap to the body which catches the keydown event and
$broadcast message to child scopes.
The element holder scope will catch the message and simply increment or decrement the
focusIndex or fire an open function if hitting enter.
EDIT
http://plnkr.co/edit/rwUDTtkQkaQ0dkIFflcy?p=preview
now supports, ordered / filtered list.
Event handling part has not changed, but now uses $index and also filtered list caching
technique combined to track which item is getting focused.
这篇关于仅使用键盘导航 UI的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
