[JQuery] カーソルキーの↑↓でinputのフォーカスを移動させる

Qiitaの新着記事を眺めていたら
　jQuery JavaScript 「↓」、「↑」キーでinputのフォーカスを移動させる
という記事を見かけまして。

ああ、そういえば昔同じことやったな　と記憶から引っ張り出してみました。
おそらくこちらのほうが先の記事よりもスマートな実現方法ではないかな、と思います。

やりたいこと

縦に並んだINPUTコントロールを、カーソルキーの↑↓で移動したい。

前提条件

• JQuery使用。
• カーソルでフォーカス移動したいコントロールは、同じクラス名を持つこと。
  それ用にクラスを設定すればいいだけなので、使えない状況は無いはず。

ソース

html

<INPUT type="text" class="sample_class"><BR>
<INPUT type="text" class="sample_class"><BR>
<INPUT type="text" class="sample_class"><BR>
<INPUT type="text" class="sample_class"><BR>
<INPUT type="text" class="sample_class"><BR>

javascript

$(document).on("keydown", ".sample_class", function(e){

	var index		=	null;
	var selector	=	".sample_class";

	//	↑キー
	if ( e.keyCode == 38 ){
		index	=	$(selector).index(this);
		if (index > 0){
			$(selector).eq(index-1).focus();
		}
		return;
	}
	//	↓キー
	if ( e.keyCode == 40 ){
		index	=	$(selector).index(this);
		if (index < $(selector).length - 1 ){
			$(selector).eq(index+1).focus();
		}
		return;
	}
});

簡単に解説

• キーDownイベント。
• イベントが発生したコントロールの index を取得。
• 押されたカーソルキーによって index に -1 or + 1 し、
  そのindexのコントロールを指定して focus() する。
• index が境界外に出ないように条件をつける。