在可聚焦元素上编写箭头导航的指南? [英] Guide for writing arrowkey navigation on focusable elements?

问题描述

我想使页面上的链接和输入元素具有可通过箭头键导航的焦点.如果我只考虑向上/向下箭头键，这很容易，这与tab/shift + tab的模式相同.

I want to make links and input elements on my page have foucs that is navigable by arrowkeys. This is easy if I just think about up/down arrow keys, which are the same pattern as tab/shift+tab.

只需找到下一个元素并将其聚焦即可.

Just find the next element and focus it.

有人可以提出一种巧妙的方法来处理用户想要在最接近的元素上左右移动的情况吗?

Can anyone suggest a neat way to handle the case where the user wants to left/right across the the closest element?

推荐答案

我认为最好的方法是定义一个自定义的arrow_nav排序索引，大致如下:

I think the best method is to define a custom, arrow_nav ordering index, something along these lines:

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)之间水平箭头，而无需更改行.

Then we can vertically arrow between (1,2,3) and (4,5,6) without changing columns. Also we can horizontally arrow between (1,4), (2,5), (3,6), without changing rows.

这是基本思想.我认为这样做是作为自定义地图.或通过为输入列指定列高来简单地自动化它，然后隐式地为每个输入提供添加顺序的索引，这将使箭头导航成为现实.

That's the basic idea. I think doing this as a custom map. Or simply automating it by specifying a column height for a column of inputs, and then implicitly giving each input the index of the order in which it was added will make arrow navigation a reality.

万岁.

这篇关于在可聚焦元素上编写箭头导航的指南?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！