カテゴリー: ブログ

はじめに

システム開発の際、ＧＵＩの要件の１つに、「入力項目は、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に初期化されます。

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

　　このブログで以前に紹介した“『Googleニュース用RSSジェネレータ』と『単眼RSS』を使って労働関連に関る最新ニュースのコンテンツを作る”の続編です。　ニュースの表示方法をもう少しカスタマイズしたくなったので、単眼RSSを使わないやり方で編集する方法を模索しました。以下を紹介します。
　
[概要]
・googleニュースをPHPのSimpleXML拡張モジュールを使ってXMLオブジェクトに変換、さらにarray型データに変換する
・array型データの中から、Webサイトの表示に必要な項目を取り出して、htmlドキュメントを成形する

　　
１．googleニュースをPHPのSimpleXML拡張モジュールを使ってxmlオブジェクトに変換、さらにarray型データに変換する

　SimpleXML拡張モジュールは、php5.0.1以上から対応しているので、最近のレンタルサーバなら殆ど利用できると思います。まず、Googleニュース用RSSジェネレータ<http://g.1o4.jp/news-rss.html>でURIを生成します。そのURIで得たデータをSimpleXMLElement、SimpleXMLIteratorを使ってarray型に変換します。というような操作が、phpマニュアルサイトの「User Contributed Notes」のコーディング例　http://php.net/manual/ja/class.simplexmliterator.phpで紹介されていましたので、参考にしました。
　　
その例の中にあるxml2array()関数を使用した場合。

[PHP コーディング例]　　

[crayon lang=”php”]
// 例：uriは労働運動関連ニュースを10件取得する場合
$uri = “https://news.google.com/news?ned=us&ie=UTF-8&oe=UTF-8&q=%E5%8A%B4%E5%83%8D%E3%80%80%E9%9B%87%E7%94%A8&output=atom&num=10&hl=ja”;
// この関数は、コーディング例にあるユーザ関数です。詳細は、上記のphpマニュアルサイトのリンク先で確認してください。
$rssAtomArray = xml2array($uri);
[/crayon]

　　
２．array型データの中から、Webサイトの表示に必要な項目を取り出して、htmlドキュメントを成形する

[php コーディング例]

[crayon lang=”php”]
$aWork = array(); // Webサイト表示に必要な項目のみ、取り出して保持しておく領域
$aSortKey = array();// ソート用

// Webサイトの表示に必要な情報だけを取り出す
foreach ($rssAtomArray[“entry”] as $row){
$jpDate = new DateTime($row[“updated”][0]);
$jpDate->setTimezone(new DateTimeZone(“Asia/Tokyo”));
array_push($aWork, array(“updated” => $jpDate->format(“Y/m/d H:i:s”), “title” => $row[“title”], “id”=> $row[“id”]));
array_push($aSortKey, $jpDate->format(“Y/m/d H:i:s”));
}
array_multisort($aSortKey, SORT_DESC, $aWork); // ニュースは、更新日時の降順でソート。

// html成形
$cHTML = “

“;
foreach($aWork as $row) {
$cHTML .= “

“;
$cHTML .= “

“;
$cHTML .= “

“;
}
$cHTML .= “

“.$row[“updated”].” “.$row[“title”][0].”

“;
echo $cHTML; // ブラウザに表示
[/crayon]

[説明]
googleニュースで得たarrayデータの要素(=xmlのタグ)

・"updated" ：ニュースの更新日時。atom(RFC3339) 形式の世界標準時だったので日本時間に変換
・"title" ：ニュースのタイトル
・"id" ：ニュースのリンク先情報

これらの要素は、１．の処理の$rssAtomArrayをprint_r()で出力して、確認しました。
今回は、googleニュースの場合ですが、他のxmlオブジェクトは、違ってくるかもしれません。
後は、Webサイトに合わせて、htmlドキュメントを成形して、表示すればＯＫです。

余談：
XMLオブジェクトをArray型に変換する方法は、ネットで検索すると、json_decode、json_encodeを利用すると簡単にarray型に変換できる、と出てきます。試してみると、googleニュースで取得したデータは、階層が深いのか？うまく変換できませんでした。今回、紹介したSimpleXML拡張モジュールには、イテレータが用意されているので、それを使えばXMLオブジェクトのハンドリングは容易になりますね。
（結局、phpマニュアルサイトのコーディング例を参考にしちゃうんですが）