メン醤のjQuery workshop

jQueryの小技などのサンプルをコード例として紹介するブログです。ネイティブJavaScriptから移行したいjQuery初心者向け、jQueryの魅力を知ってもらえたら。

複数行のテキストボックスでいわゆる縦移動をする方法

色々言い方ありますが。

やりたいこと

テーブル/リストのような複数行表示の
その行の中にあるテキストボックスにおいて
上下キーを押したらカーソル(focus)が上下に移る

とでも言ったら正確でしょうか。。

jQueryでの実装

キーイベントが発生した要素のname属性を取得して
同じnameを保持する要素群を $('input[name="'+targetName+'"]'); で取得します。
そして、自分が何番目なのか、また、押されたキーが上なのか下なのかで
どの要素にフォーカスを移すか決定します。

HTMLの実装はこんな感じの前提です

まぁ、示すまでもないんですが。
上下キーで移動できる要素は同じnameが付与されていることが前提です。