はじめに
システム開発の際、ＧＵＩの要件の１つに、「入力項目は、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要素を適用対象と認識させます。
今回はこれにて、以上。
