jQueryを使って、EnterキーでTab移動する
はじめに
システム開発の際、ＧＵＩの要件の１つに、「入力項目は、Enterキーで確定し、次の入力項目に移動すること」を挙げている事が、経験として結構あります。Webシステムにおいても、例外では無くて、以前からあった方法として、Javascriptのコーディングで
event.keyCodeプロパティを、強制的にEnterキー(13)からTabキー(9)に入れ替えてしまう方法があります。
|
1 2 3 |
if (event.keyCode == 13){ event.keyCode = 9; } |
但し、InternetExpoler Ver.9以降は、event.keyCodeプロパティの強制的な変更が出来なくなっており、 （セキュリティ対策と思われる）この方法は使えません。
そこで、どうしたものか？Google先生に聞いてみると、どうやらjQueryを使うと出来るらしいという事で、次のサイト「[jQuery] Enterキーでフォーカスを移動するには」を、参考にさせていただきまして、自分用にカスタマイズした関数「fEnterChangeTab()」を紹介します。
１．関数の仕様
・input要素の中で、button型、hidden型、readonly属性、disabled属性は、タブ移動先から除外する事。
・画面最後のinput要素でEnterキーを押されたら、最初のinput要素に移動する事。
・画面最初のinput要素でEnterキー＋Shiftキーを押されたら、最後のinput要素に移動する事。
２．javascriptコーディング例
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 |
// ①jQueryの取り込み <script type="text/javascript" src="（パス）/jquery-1.10.2.js"></script> <script type="text/javascript"> <!-- // input項目をEnter キー、Shift+Enterキーでtab移動 without(button, hidden) function fEnterChangeTab(){ // ② input要素の選択。但し、ボタンとhidden型は除く。 var oObject = "#Div要素のid :input:not(:button):not(:hidden)"; $(oObject).keypress(function(e) { var c = e.which ? e.which : e.keyCode; // クロスブラウザ対応 if (c == 13) { var index = $(oObject).index(this); // indexは0～ var cNext = ""; var nLength = $(oObject).length; for(i=index;i<nLength;i++){ cNext = e.shiftKey ? ":lt(" + index + "):last" : ":gt(" + index + "):first"; // ③ 止まってはいけいない属性 readonly if ($(oObject + cNext).attr("readonly") == "readonly") { if (e.shiftKey) index--; // １つ前 else index++; // 次へ } // ③ 止まってはいけいない属性 disabled else if ($(oObject + cNext).prop("disabled") == true) { if (e.shiftKey) index--; // １つ前 else index++; // 次へ } else break; } if (index == nLength - 1) { if (! e.shiftKey){ // 最後の項目なら、最初に移動。 cNext = ":eq(1)"; } } if (index == 0) { if (e.shiftKey) { // 最初の項目なら、最後に移動。 cNext = ":eq(" + (nLength - 1) + ")"; } } $(oObject + cNext).focus(); //e.defaultPrevented; ⇒ 2018.06.28 このプログラミングは間違い。 e.preventDefault() //規定の動作をキャンセルするため、こちらのメソッドを呼ぶ。 } }); } // ④onloadのタイミングでこの関数を実行 if(window.attachEvent){ // IE用 window.attachEvent('onload',fEnterChangeTab); } else if (window.opera){ // opera用 window.addEventListener('load',fEnterChangeTab,false); } else { // Mozilla用 window.addEventListener('load',fEnterChangeTab,false); } // --> </script> |
[説明]
① jQueryの取り込み
（パス）は適宜、環境に置き換えて下さい。jQueryはなるべく最新を取り込んだ方が良いと思います。
②input要素の選択。但し、ボタンとhidden型は除く。
jQueryのセレクタを使って、対象とするinput要素の項目だけを選択します。
また、今回は、<div></div>で囲まれた範囲（#Div要素のidを指定）のinput要素を対象としています。
③止まってはいけいない属性
readonly属性、disabled属性のinput項目は、この条件で判断して除外します。
④onloadのタイミングでこの関数を実行
画面要素が取り込まれたタイミングで、対象とするinput要素に適用させます。
因みに、クロスブラウザ対応のコーディング例。
３．input要素が動的に追加された時の対応
入力の操作で、input要素（入力項目）が動的に追加されるケースがある場合、
追加されたタイミングで、この関数を呼んでkeyPressイベント関数をリビルドします。
そうすることで、追加したinput要素を適用対象と認識させます。
今回はこれにて、以上。