javascript - フォーカス可能な要素に矢印キー ナビゲーションを記述するためのガイド?

Question

ページのリンクと入力要素に、矢印キーでナビゲートできる foucs を設定したいと考えています。タブ/シフト+タブと同じパターンである上下矢印キーについて考えれば、これは簡単です。

次の要素を見つけてフォーカスするだけです。

ユーザーが最も近い要素を左/右に移動したい場合を処理する適切な方法を誰かが提案できますか?

Answer 1

最良の方法は、カスタムの 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) の間で水平に矢印を付けることができます。

それが基本的な考え方です。カスタムマップとしてこれを行うと思います。または、入力の列の列の高さを指定して単純に自動化し、各入力に追加された順序のインデックスを暗黙的に与えることで、矢印ナビゲーションが実現します。

万歳。