0

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?

Cris Stringfellow
  • 3,714
  • 26
  • 48
  • The DOM structure has no layout. It's neither *vertical* nor *horizontal*. This distinction is made by the browser's default stylesheet and/or the page's CSS. The next or previous DOM element is simply the next or previous node in the DOM tree. – Boaz Mar 17 '13 at 13:58
  • Good point. It must somehow be based around the element offset, getBoundingClientRects but that seems difficult/expensive. – Cris Stringfellow Mar 17 '13 at 13:59
  • Actually that gives me an idea. Perhaps can define a custom ordering index. With vertically adjacent elements different by +/- 1, and horizontally adjacent elements differing by +/- column_height. Then use jQuery to select those. Since my menus won't change this should be possible. – Cris Stringfellow Mar 17 '13 at 14:01

1 Answers1

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.

Cris Stringfellow
  • 3,714
  • 26
  • 48