フォーカス移動とKey検知

タブを押下すると、フォーカスが移動します。タグに"tabindex"をいれることで、フォーカス移動順を制御することができます。

通常フォーカス対象とならないdivタグにも、tabKey押下でフォーカスをあてることが可能になります。また、別にdivタグで.focus()をCallすれば、フォーカスを充てることが可能です。

tab以外のKeyで、フォーカスをあてたいとすると、keydownイベントを登録する必要があります。

key検知は、通常は画面全体に対して登録することが多いですが、もしフォーカスが当たっている要素があるときのみKey押下を検知したいのであれば、その要素を対象に"keydown"イベントを登録するとよいです。

矢印キーでフォーカス移動させたい時は、画面全体にkeydownイベントを登録し、個々の要素にfocusとblurイベントをひもづけます。フォーカス移動をさせたいid名を対象に、リストで制御してみました。 tabキー押下でのフォーカス移動は、tabindex属性でブラウザまかせです。

課題 tabindex属性があるものを対象に、リストを動的に作成したい checkboxの大きさをかえたい

Webの勉強