【JavaScript】 TABキーで移動後にFocus、Select

　複数の入力ボックスがある画面で、TABキーで移動させる際に、思ったところに移動できるよう細かく順番を指定したいことがある。そこで、JavaScriptを利用して以下のようなものを考えてみた。

TABをjavascriptで制御

１．入力ボックスの移動順に入力ボックスIDの配列を作成し
２．タブキーが押されたら
３．次の入力ボックスを取得して
４．focus()→select()

　order = ['input_box_id_01', 'input_box_id_04', 'input_box_id_02','input_box_id_03'...]
　if (window.event.keyCode == 9) {
　　//_getNextCell()は次の順番を知るための自前関数
　　var ele = document.getElementById(_getNextCell(order));
　　ele.focus();
　　ele.select();
　}

しかし、これだとShift+Tabで前の入力ボックスに移動できない。（必要であれば実装してあげないといけない。）また、フォーカスは移動するが、select()がかからないことが時々あるので強引にHTMLのタグにonfocus="this.select();"を付けて対処する必要がある。これはHTMLのすべてのInputboxに付けてあげなければならない。

HTML側で使っていたタグ

　<input onblur="control(this.id, this.value);" type="text" id="hoge"
　<span style="font-weight:bold;">onfocus="this.select();"</span>>

いろいろ面倒なので、JavaScriptの利用をやめてtabindexに順番を入れてあげるようにした。
これであれば、TabキーもShift+Tabキーもブラウザが勝手に解釈して動かしてくれるので楽だ。

tabindexに順番を入れる

１．入力ボックスの移動順に入力ボックスIDの配列を作成し
２．入力ボックスのtabIndex属性に順番をセットして
３．onfocusイベントにselect()を追加してあげる

　order = ['input_box_id_01', 'input_box_id_04', 'input_box_id_02','input_box_id_03'...]
　for (var i = 0, l = order.length; i < l; i++) {
　　//ele[i]は入力ボックスオブジェクトを予め格納しておいたもの
　　ele[i].tabIndex = i+1;
　　ele[i].onfocus = function(e) {this.select();}
　}