Guide for writing arrowkey navigation on focusable elements?

Question

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?

Answer 1

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 });

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.

Hooray.