只使用键盘导航UI [英] Navigate the UI using only keyboard
问题描述
我试图导航THRU的只使用键盘记录列表。页面加载时，默认的焦点应该是第一条记录，当用户点击键盘上的向下箭头，下一个记录需要集中。当用户点击向上箭头，则previous记录应集中。当用户点击回车键，就应该带他们到该记录的详细信息页面。
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.
看来，这是在AngularJS支持1.1.5（不稳定），这是我们不能在生产中使用。我目前使用1.0.7。我希望做这样的事情 - 关键要在文档级别进行处理。当用户presses某个键时，code应该查找在允许的键数组。如果发现匹配（例如向下键code），它应该将焦点移（应用.highlight CSS）到下一个元素。当输入是pressed，应该抓住这.highlight CSS和得到进一步处理记录ID的记录。
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.
感谢您！
推荐答案
下面是你可以选择做什么，例如：
<一href=\"http://plnkr.co/edit/XRGPYCk6auOxmylMe0Uu?p=$p$pview\">http://plnkr.co/edit/XRGPYCk6auOxmylMe0Uu?p=$p$pview
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>
这是我能想到的最简单的方法。
它结合指令 keyTrap 到体惹人的keydown 事件 $广播消息子作用域。
该元件支架范围将捕获的消息，并简单地递增或递减
focusIndex或者按输入。
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.
<一个href=\"http://plnkr.co/edit/rwUDTtkQkaQ0dkIFflcy?p=$p$pview\">http://plnkr.co/edit/rwUDTtkQkaQ0dkIFflcy?p=$p$pview
现在支持，有序/过滤列表。
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屋！
