カテゴリー: Webノウハウ

 ドメイン名にアンダースコアが含まれていると、ブラウザからサーバリクエストをした際に、ドメイン宛てのCookieの送信がブロックされてしまう。
 
 参照：[PRB] Internet Explorer セキュリティ修正プログラム MS01-055 のインストール後、セッション変数が要求間で保持されない
 
 
 以上はInternet Explorerにおける振る舞いですが、RFC952の仕様ではホスト名の命名規則にアンダースコアは 含まれていないので、使ってはだめでした。 
 
　今回はテスト環境でハマったのですが（そもそもテスト環境でしか起こりえない。本番では正式なドメイン名になるので）、テスト環境だからとりあえず「何でもいいや」という気持ちで、分かりやすくしたいからアンダースコアを含めたドメイン名を設定しました。よくプログラムのコーディングで、変数名にアンダースコアを使うのでそんな延長で気軽に付けてしまったが為に、半日悩んでしまいました。

　また、例えば"localhost"、"testserver" 等、セカンドレベルドメイン(.coとか)、トップレベルドメイン(.jpとか)が無かったり、いわゆるFQDN形式に沿っていないと、やはりcookie送信がブロックされてしまいました。(Internet Explorer調べ)
架空であってもそれらしい名前を設定しておく事ですね。
 
 確か過去にも同じ痛い目にあったはずなのに・・・。戒めを込めて記録しておきます。

はじめに

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

 

今回はこれにて、以上。

はじめに
選択肢がたくさんあるセレクトボックスは、選ぶ時、縦に広がったボックスから見つけるのに苦労します。自前で絞り込みができる方法を考える前に、ネットで探してみたら、やっぱりありました。jQueryプラグインのSelect2です。このjQuery Select2は、ボックス内の検索、タグ付け、ajaxリクエストによるセレクト項目の設定等が出来て、Bootstrapテーマで簡単に実装できるセレクトボックスです。今回、JavaScriptのDOMを使って、セレクトボックスをHTMLページに動的に追加した際、つまづいた事があったので、そのメモ書きです。

概要
DOMでセレクトボックスを追加したら、その後、『$(‘select’).select2();』を実行しておくこと。　そうしないと、select要素がselect2で初期化されない。

例）「好きな果物」セレクトボックス　追加ボタン付き

１．ダウンロード
・seletc2
https://select2.github.io/
・select2 bootstrapテーマ
https://github.com/select2/select2-bootstrap-theme

２．select2とbootstrapの準備
jsとcssを取り込みます。

<link href="(パス)/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="(パス)/css/select2.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></></script>
<script type="text/javascript" src="(パス)/js/bootstrap.min.js"></script>
<script type="text/javascript" src="(パス)/js/select2.min.js"></script>

（パス）は適宜、環境に置き換えて下さい。jQueryはなるべく最新を取り込んだ方が良いと思います。

３．DOMによるselect要素の追加操作

コーディング例です。

(1) html

<table align=left>
　<tr>
　　<td  style="width:100px;height:30px;text-align:center;background-color: #ffffff;border:1px solid #000000;" >
　　　<span>好きな果物</span>
　　/td>
　　<td style="width:200px;height:30px;text-align:center;background-color: #ffffff;border:1px solid #000000;" >
　　　<select class="select" name="cSelFruit_1" id="cSelFruit_1" >
　　　　<option value="0" selected>　　</option>
　　　　<option value="1" >バナナ</option>
　　　　<option value="2" >イチゴ</option>
　　　　<option value="3" >メロン</option>
　　　　<option value="4" >リンゴ</option>
　　　　<option value="5" >グレープフルーツ</option>
　　　</select>
　　</td>
　　<td nowrap align=center><button type="button"  id="btnInsert_1" onClick="fOnClickInsert(this);"  >追加</button></td>
　</tr>
　<tr id="InsertLineEnd"></tr>
</table>

<!--追加行ひな型 ここから -->
<table  style="visibility:hidden;" id="masterDefault">
　<tr id="II_prototype">
　　<td  style="width:60px;height:30px;text-align:center;background-color: #ffffff;border:1px solid #000000;" >
　　　<span>好きな果物</span>
　　</td>
　　<td style="width:60px;height:30px;text-align:center;background-color: #ffffff;border:1px solid #000000;" >
　　　　<select name="cSelFruit" id="cSelFruit" >
　　　　　<option value="0" selected>　　</option>
　　　　　<option value="1" >バナナ</option>
　　　　　<option value="2" >イチゴ</option>
　　　　　<option value="3" >メロン</option>
　　　　　<option value="4" >リンゴ</option>
　　　　　<option value="5" >グレープフルーツ</option>
　　　　</select>
　　</td>
　　<td nowrap align=center><button type="button"  id="btnInsert" onClick="fOnClickInsert(this);"  >追加</button></td>
　</tr>
</table>
<!-- ひな型 ここまで-->

(2) javascript

// ①静的に実装されているセレクトボックスの初期化
$(function(){
　$('.select').select2();
});

// select要素の追加 
function fOnClickInsert(oPara){
// 操作した行番号を取得  oPara.id 例) "cSelFruit_1"
　var aWork = oPara.id.split("_");
　var nLineNo = aWork[aWork.length - 1];

// ひな型行オブジェクトの取得
　var oLine1 = document.getElementById("II_prototype");

// 追加する行オブジェクトを作成する
　var oNewLine1 = oLine1.cloneNode(true);

　var oNewLine_td = "";
　var oNewLine_select = "";

// ここから属性情報設定
　var nNewLineNo = parseInt(nLineNo) + 1;

// td,button,select情報の設定
　oNewLine_button = oNewLine1.getElementsByTagName("button");
　oNewLine_select = oNewLine1.getElementsByTagName("select");

// ボタン
　for (i=0;i<oNewLine_button.length;i++){
　　if(oNewLine_button.item(i).id == "btnInsert"){ // 追加ボタン
　　　oNewLine_button.item(i).id   = "btnInsert_" + nNewLineNo;
　　}
　　else {
　　　continue;
　　}
　}
// セレクトボックス
　for (i=0;i<oNewLine_select.length;i++){
　　if(oNewLine_select.item(i).id == "cSelFruit"){	// 好きな果物
　　　oNewLine_select.item(i).id   = "cSelFruit_" + nNewLineNo;
　　　oNewLine_select.item(i).name = "cSelFruit_" + nNewLineNo;

　　　// ②classはここで設定しないと、効かない。
　　　oNewLine_select.item(i).className = "select"; 
　　}
　　else {
　　　continue;
　　}
　}
　// 行追加
　oAfterLine = document.getElementById("InsertLineEnd");
　oAfterLine.parentNode.insertBefore(oNewLine1,oAfterLine);
　
　// ③ここで動的に追加したセレクトボックスの初期化
　$('.select').select2();	

　return;
}

①のセレクトボックスの初期化は、ロードされた時点で実装されているselect要素に対して、適用されます。
②のクラス設定は、このタイミングで設定しないとうまく効きません。
③のタイミングで、直前に追加したselect要素がselect2に初期化されます。

４．追加ボタンを押した結果