jQuery

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

More than 1 year has passed since last update.

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 が境界外に出ないように条件をつける。