angularjs – 仅使用键盘导航UI

发布时间：2020-12-17 09:41:56 所属栏目：安全来源：网络整理

导读：我试图通过仅使用键盘的记录列表导航.当页面加载时,默认的“焦点”应该在第一个记录上,当用户单击键盘上的向下箭头时,下一个记录需要聚焦.当用户点击向上箭头时,上一个记录应该被聚焦.当用户单击“输入”按钮时,应将其转到该记录的详细信息页面. Here’s wha

我试图通过仅使用键盘的记录列表导航.当页面加载时,默认的“焦点”应该在第一个记录上,当用户单击键盘上的向下箭头时,下一个记录需要聚焦.当用户点击向上箭头时,上一个记录应该被聚焦.当用户单击“输入”按钮时,应将其转到该记录的详细信息页面.

Here’s what I have so far on Plunkr.

似乎在1.1.5(不稳定)的AngularJS中支持这一点,我们不能在生产中使用它.我目前正在使用1.0.7.我希望做这样的事情 – 关键应该在文档级别处理.当用户按某个键时,代码应该查找一个允许的键的数组.如果找到匹配项(例如下键编码),则应将焦点移动(应用.highlight css)到下一个元素.按下Enter键后,应该抓住记录,高亮css并获取进一步处理的记录ID.

谢谢！

以下是您可以选择的示例：
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或点击进入时打开一个打开的功能.

编辑

http://plnkr.co/edit/rwUDTtkQkaQ0dkIFflcy?p=preview

现在支持,有序/过滤列表.

事件处理部分没有改变,但现在使用$index并且也过滤列表缓存技术结合起来跟踪哪个项目正在聚焦.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!