jQuery::Up/Downキーでフォームを移動

お客さんからUp/Downキーを使って、HTMLのフォームを移動したいという要望が出てきた。多いと100件近くの入力を行う日があるらしく、少しでも楽に入力したいらしい。 ということでウェブを調べたが、大体こんな感じ･･･

1. キー入力をイベントでキャッチ。
2. Downキーなら、代わりにTABをイベントとして発行。
3. Upキーなら、代わりにShift+TABをイベントして発行。
4. が、しかしながら！ 現状では「Shift」をイベントとして発行できない。

というところで終わっていた。 ということで自作してみることにした。 基本的な方向性としては、以下の手順でフォームの移動を行う。

1. フォーム内の要素の一覧を作成。
2. 現在、フォーカスされている要素を保持。
3. Downキーが押されたら、現在フォーカスされてる要素の次の要素にフォーカスを当てる。
4. Upキーが押されたら、･･･以下略。

こういうことを実行するにはjQueryが最適だろうということで、jQueryを使って開発することにした。実際に作ってみて、やっぱり「jQueryはすごい」ということがよく分かった。 ということで、次は実際のコードと簡単なコードの説明をしてみます。 正直、JavaScriptもjQueryも初心者のようなものなので、間違い・訂正･改善方法などご指摘いただけると助かります。

「パート2：フォーム要素一覧」へ続く