在可聚焦元素上书写arrowkey导航指南？

我想让我的网页上的链接和输入元素具有箭头键可导航的foucs。这很容易，只要考虑向上/向下箭头键，它们与tab/shift +选项卡相同。在可聚焦元素上书写arrowkey导航指南？

只需找到下一个元素并将其关注。

任何人都可以提出一个整洁的方式来处理情况，用户希望对面的最接近的元素左/回事呢？

来源

2013-03-17 Cris Stringfellow

DOM结构没有布局。它既不是*垂直*也不是*水平*。这种区别是由浏览器的默认样式表和/或页面的CSS所做出的。下一个或前一个DOM元素只是DOM树中的下一个或前一个节点。 – Boaz 2013-03-17 13:58:09

好点。它必须以某种方式基于元素偏移量getBoundingClientRects，但似乎很难/昂贵。 – 2013-03-17 13:59:29

其实这给了我一个想法。也许可以定义一个自定义排序索引。垂直相邻元素相差+/- 1，水平相邻元素相差+/-列高度。然后使用jQuery来选择这些。由于我的菜单不会改变这应该是可能的。 – 2013-03-17 14:01:43

我认为最好的方法是定义一个定制的，arrow_nav沿着这些线路订货指数，东西：

screen.addInput({ name:'height', arrow_nav_index:1 }); 
screen.addInput({ name:'weight', arrow_nav_index:2 }); 
screen.addInput({ name:'eye color', arrow_nav_index:3 }); 
screen.addInput({ name:'hair color', arrow_nav_index:4 }); 
screen.addInput({ name:'star sign', arrow_nav_index:5 }); 
screen.addInput({ name:'think star signs are bullshit?', arrow_nav_index:6 });

然后我们就可以之间垂直箭头（1,2,3）和（4,5， 6）不改变列。此外，我们可以在（1,4），（2,5），（3,6）之间水平箭头，而无需更改行。

这就是基本的想法。我认为这是一个自定义地图。或者简单地通过为一列输入指定一个列高度来自动化它，然后隐含地给每个输入添加它的顺序的索引将使箭头导航成为现实。

Hooray。

来源

2013-03-17 19:33:54

在可聚焦元素上书写arrowkey导航指南？

回答

相关问题