//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
// JavaScriptライブラリ - イベント
//■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
var EVENT = {
//■■■■■■■■■■■■
// 基本
//■■■■■■■■■■■■
/**
*--------------------------------------------------------------------------------
* ■■■イベントハンドラ追加
* @example EVENT.addEvent(document.getElementById(ele_id), "mousedown", DRAG_mdown);
* EVENT.addEvent(document.getElementById(ele_id), "mouseup", DRAG_mup);
* EVENT.addEvent(window.document, "mousemove", DRAG_mmove);
*
* @date 2010-02-19
* @param object ele イベント発生オブジェクト
* @param string evtType イベント名（on無し！）
* @param string func イベント処理関数（カッコ無し！）
* @param bool capture キャプチャフラグ
* @return void
*--------------------------------------------------------------------------------
*/
addEvent : function(ele, evtType, func, capture)
{
capture = (capture) ? capture : false;
if (ele.addEventListener) {
// IE以外
ele.addEventListener(evtType, func, capture);
} else if (ele.attachEvent) {
// IE
ele.attachEvent("on" + evtType, func);
} else {
// 古いブラウザ
ele["on" + evtType] = func;
}
},
/**
*--------------------------------------------------------------------------------
* ■■■イベントハンドラ削除
* @example EVENT.removeEvent(document.getElementById(ele_id), "mousedown", DRAG_start);
* EVENT.removeEvent(document.getElementById(ele_id), "mouseup", DRAG_end);
* EVENT.removeEvent(window.document, "mousemove", DRAG_on);
*
* @date 2010-02-19
* @param object ele イベント発生オブジェクト
* @param string evtType イベント名（on無し！）
* @param string func イベント処理関数（カッコ無し！）
* @param bool capture キャプチャフラグ
* @return void
*--------------------------------------------------------------------------------
*/
removeEvent : function(ele, evtType, func, capture)
{
capture = (capture) ? capture : false;
if (ele.removeEventListener) {
// IE以外
ele.removeEventListener(evtType, func, capture);
} else if (ele.attachEvent) {
// IE
ele.detachEvent("on" + evtType, func);
} else {
// 古いブラウザ
ele["on" + evtType] = null;
}
},
/**
*--------------------------------------------------------------------------------
* ■■■loadイベントハンドラ追加
* @example EVENT.addOnLoadEvent(document.getElementById(ele_id), "mousedown", DRAG_start);
* EVENT.removeEvent(document.getElementById(ele_id), "mouseup", DRAG_end);
* EVENT.removeEvent(window.document, "mousemove", DRAG_on);
*
* @date 2010-09-30
* @param string func イベント処理関数（カッコ無し！）
* @return void
*--------------------------------------------------------------------------------
*/
addOnLoadEvent : function(func)
{
if (window.addEventListener || window.attachEvent) {
EVENT.addEvent(window, "load", func, false);
} else {
var oldQueue = (window.onload) ? window.onload : function() {};
window.onload = function() {
oldQueue();
func();
}
}
},
/**
*--------------------------------------------------------------------------------
* ■■■changeイベント発生
* @example EVENT.fireChangeEvent("bukken_ken_id");
* @date 2010-05-20
* @param object|string target イベント発生要素 or ID
* @return void
*--------------------------------------------------------------------------------
*/
fireChangeEvent : function(target)
{
if (typeof target == "string") {
target = document.getElementById(target);
}
if (document.createEvent) {
// DOMイベントモデル
var evt = document.createEvent('HTMLEvents');
evt.initEvent('change', true, false);
target.dispatchEvent(evt);
} else if (document.createEventObject) {
// IEイベントモデル
target.fireEvent('onchange');
}
},
/**
*--------------------------------------------------------------------------------
* ■■■イベント発生オブジェクトID取得
* @example
* @date 2008-7-6
* @param string evt イベントオブジェクト
* @return void
*--------------------------------------------------------------------------------
*/
getEventId : function(evt)
{
if (evt.srcElement) {
// IE
return evt.srcElement.getAttribute("id");
} else if (evt.target) {
// IE以外
return evt.target.getAttribute("id");
}
},
//■■■■■■■■■■■■
// フォーム
//■■■■■■■■■■■■
/**
*--------------------------------------------------------------------------------
* ■■■テーブルマウスオーバー時・行背景色変更イベント追加
* @example EVENT.addEventRowBgcolorOnmouseover("tbl_top");
* @date 2010-07-06
* @param string table_id テーブルID
* @return void
*--------------------------------------------------------------------------------
*/
addEventRowBgcolorOnmouseover : function(table_id)
{
var table = document.getElementById(table_id); // TABLEノード
var tr_array = table.getElementsByTagName("TR"); // TRノード配列
var tr_len = tr_array.length; // 行数
for (var i = 0; i < tr_len; i++) {
// 元の背景色取得（IE・Operaでは「#ffffff」それ以外では「rgb(255, 255, 255)」）
var src_bgcolor = BASIC.getElementStyle(tr_array[i], "background-color");
// イベントハンドラ設定
tr_array[i].onmouseover = function() {
this.style.backgroundColor = "#FFFFCC";
}
tr_array[i].onmouseout = (function (bgcolor) {
return function() {this.style.backgroundColor = bgcolor;}
})(src_bgcolor);
}
},
/**
*--------------------------------------------------------------------------------
* ■■■テキストエレメントフォーカス時・背景色変更イベント追加
* @example EVENT.addEventInputBgcolorOnfocus("form_input");
* @date 2010-02-18
* @param string form_id フォームID
* @param string color フォーカス時背景色RGB（デフォルト:"#FFFFCC"）
* @return void
*--------------------------------------------------------------------------------
*/
addEventInputBgcolorOnfocus : function(form_id, color)
{
//■背景色初期設定
if (color === undefined) {
color = "#FFFFCC";
}
//■指定フォーム内のテキストエレメントを探しイベントハンドラ設定
var form_obj = document.getElementById(form_id);
var ele;
for (var i = 0; i < form_obj.elements.length; i++) {
ele = form_obj.elements[i];
if (ele.type === "text" || ele.type === "textarea" || ele.type === "password") {
// フォーカスのままリロード時にも背景色（IEだけ？）
if (document.activeElement.id === ele.id) {
ele.style.backgroundColor = color;
}
// イベントハンドラ設定
setEvent(ele, color);
}
}
//■イベントハンドラ設定関数
function setEvent(ele, color)
{
var func_focus = function() {ele.style.backgroundColor = color;};
var func_blur = function() {ele.style.backgroundColor = "#FFFFFF";};
EVENT.addEvent(ele, "focus", func_focus);
EVENT.addEvent(ele, "blur", func_blur);
}
},
/**
*--------------------------------------------------------------------------------
* ■■■テキストエレメント入力時・入力文字数表示イベント追加
* @example 予めテキストフィールド（エリア）に「maxlen="入力最大文字数"」を付け、
* 入力文字数表示場所に「id="cntlen_テキスト入力エレメントID"」を付けたタグを置く。
* 文字数のみを表示する場合は、「maxlen="0"」にする。
*
*
* EVENT.addEventInputLength("form_input");
* @date 2011-01-16
* @param string form_id フォームID
* @return void
*--------------------------------------------------------------------------------
*/
addEventInputLength : function(form_id)
{
//■指定フォーム内のテキストエレメントを探しイベントハンドラ設定
var form_obj = document.getElementById(form_id);
for (var i = 0; i < form_obj.elements.length; i++) {
var ele = form_obj.elements[i];
// typeプロパティがテキスト系で無ければスルー
if (ele.type !== "text" && ele.type !== "textarea" && ele.type !== "password") {
continue;
}
// テキストエレメント属性値取得
var ele_id = ele.getAttribute("id");
var ele_maxlen = ele.getAttribute("maxlen");
// id,maxlen属性が無ければスルー
if (!ele_id || !ele_maxlen || ele_maxlen.match(/[^0-9]/)) {
continue;
}
// 「"cntlen" + テキストエレメントID」というIDのエレメントが存在すればイベント追加
if (document.getElementById("cntlen_" + ele_id)) {
var target_ele = document.getElementById("cntlen_" + ele_id);
// keyupイベント登録
EVENT.addEvent(ele, "keyup",
function(evt) {
var e = evt || window.event;
var input_ele = (e.srcElement) ? e.srcElement : e.target;
var input_ele_id = input_ele.getAttribute("id");
var input_ele_maxlen = input_ele.getAttribute("maxlen");
var input_value = BASIC.mbtrim(input_ele.value);
var input_len = input_value.length;
var show_ele = document.getElementById("cntlen_" + input_ele_id);
var inner_str;
result = input_value.match(/\r\n/g); // 改行は1文字とカウント
if (result !== null) {
input_len -= result.length;
}
inner_str = "（" + input_len;
if (input_ele_maxlen !== "0") {
inner_str += "/" + input_ele_maxlen;
}
inner_str += "文字）";
show_ele.innerHTML = inner_str;
if (input_ele_maxlen) {
show_ele.style.color = (input_len > input_ele_maxlen && input_ele_maxlen !== "0") ? "#ff0000" : "#666666";
}
}
);
// blurイベント登録
EVENT.addEvent(ele, "blur",
function(evt) {
var e = evt || window.event;
var input_ele = (e.srcElement) ? e.srcElement : e.target;
var input_ele_id = input_ele.getAttribute("id");
var input_ele_maxlen = input_ele.getAttribute("maxlen");
var show_ele_id = "cntlen_" + input_ele_id;
document.getElementById(show_ele_id).innerHTML = "";
}
);
}
}
},
/**
*--------------------------------------------------------------------------------
* ■■■エンターキーによるsubmit無効化
* @example EVENT.blockSubmitByEnter("form_input");
* @todo イベント追加関数で追加！
* @date 2010-12-02
* @param string form_ele フォーム要素 or ID
* @return void
*--------------------------------------------------------------------------------
*/
blockSubmitByEnter : function(form_ele)
{
//■フォーム要素
if (typeof form_ele === "string") {
form_ele = document.getElementById(form_ele);
}
//■指定フォーム内のテキストボックスにイベントハンドラ設定
var ele;
for (var i = 0; i < form_ele.elements.length; i++) {
ele = form_ele.elements[i];
if (ele.type === "text" || ele.type === "password") {
ele.onkeypress = function(evt)
{
evt = evt || window.event;
var charCode = (evt.charCode) ? evt.charCode : ((evt.which) ? evt.which : evt.keyCode);
if (charCode == 13 || charCode == 3) {
return false;
}
return true;
}
}
}
},
/**
*--------------------------------------------------------------------------------
* ■■■ラジオボタンクリック時・指定エレメント使用可否変更イベント設定
* @example var ele_array = ["cstm_passwd", "cstm_passwd2"];
* EVENT.changeUsableByRadio("cstm_member_register_flg1", ele_array);
* @date 2010-11-15
* @param object|string radio スイッチラジオボタンエレメント or ID
* @param array ele_array 使用可否対象エレメントID格納配列
* @return void
*--------------------------------------------------------------------------------
*/
changeUsableByRadio : function(radio, ele_array)
{
//■エレメント取得
if (typeof radio === "string") {
radio = document.getElementById(radio);
}
//■ラジオボタン群のid属性値を配列取得
var change_radio_name = radio.getAttribute('name');
var change_radio_id = radio.getAttribute('id');
var radio_nodelist = document.getElementsByName(change_radio_name);
//■現在の使用可否設定
var check_flg = document.getElementById(change_radio_id).checked;
var color = (check_flg) ? '#FFFFFF' : '#DDDDDD';
for (var i = 0; i < ele_array.length; i++) {
document.getElementById(ele_array[i]).disabled = !check_flg;
document.getElementById(ele_array[i]).style.backgroundColor = color;
}
//■イベントハンドラ設定
for (var i = 0; i < radio_nodelist.length; i++) {
radio_nodelist[i].onclick = function()
{
var check_flg = document.getElementById(change_radio_id).checked;
var color = (check_flg) ? '#FFFFFF' : '#DDDDDD';
for (var j = 0; j < ele_array.length; j++) {
document.getElementById(ele_array[j]).disabled = !check_flg;
document.getElementById(ele_array[j]).style.backgroundColor = color;
}
}
}
},
/**
*--------------------------------------------------------------------------------
* ■■■セレクトボックス変更時・submitイベント追加
* @example EVENT.addEventSubmitOnChange("type");
* @todo イベント追加関数で追加！
* @date 2010-09-24
* @param string ele セレクトボックス要素 or ID
* @return void
*--------------------------------------------------------------------------------
*/
addEventSubmitOnChange : function(ele)
{
if (typeof ele === "string") {
ele = document.getElementById(ele);
}
//■表示カテゴリ変更セレクトボックスをリセット
// セレクトボックス変更でsubmitし、戻るボタンで戻った時にページ内容と一致するように。
ele.form.reset();
window.onunload = function(){} // IE以外用
//■表示カテゴリ変更イベント設定
ele.onchange = function()
{
this.form.submit();
}
},
/**
*--------------------------------------------------------------------------------
* ■■■セレクトボックス選択時・選択項目ワイド化イベント追加
* CSSで幅指定しその幅を超える選択項目があった場合、IEでは後の文字が切れてしまうので。
* @example EVENT.widenSelectboxOnMouseDown("room_id", 17);
* @date 2010-09-26
* @param string ele セレクトボックス要素 or ID
* @param int limit_char_num 限界文字数（これを超える文字数の選択項目がないと動かさない）
* @return void
*--------------------------------------------------------------------------------
*/
widenSelectboxOnMouseDown : function(ele, limit_char_num)
{
//■IE以外は必要無し
if (!BASIC.isIE()) {
return;
}
//■セレクトボックス要素
if (typeof ele === "string") {
ele = document.getElementById(ele);
}
var ele = document.getElementById("room_id");
var org_width = BASIC.getElementStyle(ele, "width");
//■限界文字数チェック
if (limit_char_num !== undefined) {
var maxlen = 0;
var opt_text_len;
for (var i = 0; i < ele.options.length; i++) {
opt_text_len = ele.options[i].text.length;
if (opt_text_len > maxlen) {
maxlen = opt_text_len;
}
}
if (maxlen <= 17) {
return;
}
}
//■イベントハンドラ設定
ele.onmousedown = function() {
this.style.width = "auto";
}
ele.onchange = (function (w) {
return function() {this.style.width = w;}
})(org_width);
ele.onblur = (function (w) {
return function() {this.style.width = w;}
})(org_width);
},
/**
*--------------------------------------------------------------------------------
* ■■■他のセレクトボックス変更時・セレクトボックス項目変更イベント追加
* @example EVENT.addEventFilterOptgroupBySelect("bukken_ken_id", "bukken_city_id");
* EVENT.fireChangeEvent("bukken_ken_id");
* @date 2010-05-20
* @param string selectbox1_id 親（上位カテゴリ用）セレクトボックスID
* @param string selectbox2_id 子（項目変更用）セレクトボックスID
* @return void
*--------------------------------------------------------------------------------
*/
addEventFilterOptgroupBySelect : function(selectbox1_id, selectbox2_id)
{
var option_data = {}; // 子セレクトボックス・項目データ格納配列
var default_selected_value; // 子セレクトボックス・デフォルトvalue
var default_flg = true; // ページロード直後フラグ
//■セレクトボックスエレメント
var selectbox1 = document.getElementById(selectbox1_id);
var selectbox2 = document.getElementById(selectbox2_id);
//■子セレクトボックス項目を配列格納
var optgroups = selectbox2.getElementsByTagName('optgroup');
for (var i = 0; i < optgroups.length; i++) {
var optgroup = optgroups[i];
var optgroup_label = optgroup.getAttribute('label');
var options = optgroup.getElementsByTagName('option');
if (option_data[optgroup_label] === undefined) {
option_data[optgroup_label] = {};
}
for (var j = 0; j < options.length; j++) {
var option = options[j];
option_data[optgroup_label][option.text] = option.value;
// デフォルトvalueを記憶
if (option.defaultSelected) {
default_selected_value = option.value;
}
}
}
//■イベント追加
EVENT.addEvent(selectbox1, "change", filterOptgroup);
//■イベントハンドラ
function filterOptgroup(evt) {
// 親セレクトボックスでの選択テキスト取得
var e = evt || window.event;
var event_selectbox = (e.srcElement) ? e.srcElement : e.target;
var selected_text = event_selectbox[event_selectbox.selectedIndex].text; // 選択テキスト
// 子セレクトボックスの全項目削除
var headline = "";
while (selectbox2.hasChildNodes()) {
var child = selectbox2.firstChild;
if (child.tagName === "OPTION" && child.value === "0") {
headline = child.text;
}
if (child.tagName === "OPTION" && child.defaultSelected) {
alert("atta" + child.value + child.text);
}
selectbox2.removeChild(child);
}
// 項目変更用セレクトボックスに項目追加
// new Option(textプロパティの値, valueプロパティの値, defaultSelectedプロパティの値, selectedプロパティの値)
if (headline !== "") {
selectbox2.options[0] = new Option(headline, 0);
}
var group_data = option_data[selected_text];
var i = 1;
for (option_text in group_data) {
var selected_flg = (default_flg && group_data[option_text] === default_selected_value);
selectbox2.options[i] = new Option(option_text, group_data[option_text], false, selected_flg);
i++;
}
default_flg = false;
}
}
}