Webノウハウ

はじめに

システム開発の際、ＧＵＩの要件の１つに、「入力項目は、Enterキーで確定し、次の入力項目に移動すること」を挙げている事が、経験として結構あります。Webシステムにおいても、例外では無くて、以前からあった方法として、Javascriptのコーディングで
event.keyCodeプロパティを、強制的にEnterキー(13)からTabキー(9)に入れ替えてしまう方法があります。

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コーディング例

// ①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要素を適用対象と認識させます。

今回はこれにて、以上。