[新着] Webテンプレートを仮オープンしました
// DOM Level 2 準拠（Firefox、Opera、Safari）
if (document.implementation &&
document.implementation.hasFeature ('HTML' , '2.0') &&
document.implementation.hasFeature ('HTMLEvents' , '2.0') &&
document.implementation.hasFeature ('MouseEvents', '2.0'))
{
var input = document.getElementById ('textbox');
var form = input.form;
var img = document.getElementById ('img');
var button = img.parentNode;
form.addEventListener ('submit', function (event) {
img.src = (input.value == '') ? 'A-2.gif' : 'B-2.gif';
}, false);
button.addEventListener ('mouseover', function (event) {
img.src = (input.value == '') ? 'A-3.gif' : 'B-3.gif';
}, false);
button.addEventListener ('mouseout', function (event) {
img.src = (input.value == '') ? 'A-1.gif' : 'B-1.gif';
}, false);
}
// IE 5.5 以上
else if (/*@cc_on @if (@_jscript_version >= 5.5) true @else@*/ false /*@end@*/)
{
var input = document.getElementById ('textbox');
var form = input.form;
var img = document.getElementById ('img');
var button = img.parentNode;
form.attachEvent ('submit', function (event) {
img.src = (input.value == '') ? 'A-2.gif' : 'B-2.gif';
} );
button.attachEvent ('mouseover', function (event) {
img.src = (input.value == '') ? 'A-3.gif' : 'B-3.gif';
} );
button.attachEvent ('mouseout', function (event) {
img.src = (input.value == '') ? 'A-1.gif' : 'B-1.gif';
} );
}私としてもなるべくエレガントで短いコードを書きたいとは思うのだが、たかだか 100 行にも満たない規模で、必要なことを全て盛り込んだ『なるべく短いソース』なんてのは、土台無理な話だ。すみません、『なるべく短いコード』というのは、「できるなら」という希望であって、軽い気持ちでした。
<form id="FORM" class="SERECT_0"> <input type="text" value="" id="TEXTBOX" /> <button type="submit" id="SUBMIT"><img src="A-1.gif" id="IMG1" /></button> <button type="reset" id="RESET"><img src="1.png" id="IMG2" /></button> </form>
[A-1] : 【テキストボックス】に何も入力されていない状態で【FORM】が非アクティブ常態のとき [B-1] : 【テキストボックス】に何か入力された状態で【FORM】が非アクティブ常態のとき [A-2] : 【テキストボックス】に何も入力されていない状態で【FORM】がアクティブ常態のとき ただし、【IMG2】のsrcが[2.png]のときは、[A-1]となる [B-2] : 【テキストボックス】に何か入力された状態で【FORM】がアクティブ常態のとき ただし、【IMG2】のsrcが[2.png]のときは、[B-1]となる [A-3] : 【テキストボックス】に何も入力されていない状態で【SUBMIT】にマウスカーソルが乗っているとき 【FORM】のアクティブ非アクティブは関係無い [B-3] : 【テキストボックス】に何か入力された状態で【SUBMIT】にマウスカーソルが乗っているとき 【FORM】のアクティブ非アクティブは関係無い
連番 発生イベント ├→[【IMG1.src】に書き出す文字列a] この値aを書き出す条件 (この条件aにより【IMG1.src】の値がこの値aに書き換えられる場合、直前の値として可能性のあるもの) └→[【IMG1.src】に書き出す文字列i] この値iを書き出す条件 (この条件iにより【IMG1.src】の値がこの値iに書き換えられる場合、直前の値として可能性のあるもの) ※ [他*] : 上記で表示される条件を定義した画像を【IMG1.src】に書き出す以外に行う処理
A 【FORM】（子孫を含む）が選択状態になった focus ├→[A-1] 【IMG2.src】が[2.png]になっていて尚且つ【TEXTBOX.value】が空である場合 ([A-1]) └→[B-1] 【IMG2.src】が[2.png]になっていて尚且つ【TEXTBOX.value】が空でない場合 ([B-1]) ├→[A-2] 【IMG2.src】が[2.png]になっておらず且つ【TEXTBOX.value】が空であり且つ【IMG1.src】が[A-3]でない場合 ([A-1]) └→[B-2] 【IMG2.src】が[2.png]になっておらず且つ【TEXTBOX.value】が空でなく且つ【IMG1.src】が[B-3]でない場合 ([B-1]) ├→[A-3] このイベントにより[A-3]になることは無い（すでになっていることはあるが、特に分岐の必要は無い） └→[B-3] このイベントにより[B-3]になることは無い（すでになっていることはあるが、特に分岐の必要は無い） └→[他1] 【FORM.className】を[SERECT_1]にする B 【FORM】の選択状態が解除された blur ├→[A-1] 【TEXTBOX.value】が空であり、【IMG.src】が[A-3]でない場合 ([A-1],[A-2]) └→[B-1] 【TEXTBOX.value】が空でなく、【IMG.src】が[B-3]でない場合 ([B-1],[B-2]) ├→[A-2] このイベントにより[A-2]になることは無い └→[B-2] このイベントにより[b-2]になることは無い ├→[A-3] このイベントにより[A-3]になることは無い（すでになっていることはあるが、特に分岐の必要は無い） └→[B-3] このイベントにより[B-3]になることは無い（すでになっていることはあるが、特に分岐の必要は無い） └→[他1] 【FORM.className】を[SERECT_0]にする C 【RESET】にマウスカーソルが乗った mouseover ├→[A-1] 【TEXTBOX.value】が空である場合 ([A-1],[A-2]) └→[B-1] 【TEXTBOX.value】が空でない場合 ([B-1],[B-2]) ├→[A-2] このイベントにより[A-2]になることは無い └→[B-2] このイベントにより[B-2]になることは無い ├→[A-3] このイベントにより[A-3]になることは無い └→[B-3] このイベントにより[B-3]になることは無い └→[他1] 【IMG2.src】を[2.png]にする D 【RESET】にフォーカスが合わされた 今のところ考慮せず E 【RESET】からマウスカーソルが離れた mouseout ├→[A-1] 【FORM.className】が[SERECT_1]でなく且つ【TEXTBOX.value】が空である場合 ([A-1],[A-2]) └→[B-1] 【FORM.className】が[SERECT_1]でなく且つ【TEXTBOX.value】が空でない場合 ([B-1],[B-2]) ├→[A-2] 【FORM.className】が[SERECT_1]であり且つ【TEXTBOX.value】が空である場合 ([A-1],[A-2]) └→[B-2] 【FORM.className】が[SERECT_1]であり且つ【TEXTBOX.value】が空でない場合 ([B-1],[B-2]) ├→[A-3] このイベントにより[A-3]になることは無い └→[B-3] このイベントにより[B-3]になることは無い └→[他1] 【IMG2.src】を[1.png]にする F 【RESET】からフォーカスが離れた 今のところ考慮せず G 【SUBMIT】にマウスカーソルが乗った mouseover ├→[A-1] このイベントにより[A-1]になることは無い └→[B-1] このイベントにより[B-1]になることは無い ├→[A-2] このイベントにより[A-2]になることは無い └→[B-2] このイベントにより[B-2]になることは無い ├→[A-3] 【TEXTBOX.value】が空である場合 └→[B-3] 【TEXTBOX.value】が空でない場合 H 【SUBMIT】にフォーカスが合わされた 今のところ考慮せず I 【SUBMIT】からマウスカーソルが離れた mouseout ├→[A-1] 【FORM.className】が[SERECT_1]でなく且つ【TEXTBOX.value】が空である場合 ([A-3]) └→[B-1] 【FORM.className】が[SERECT_1]でなく且つ【TEXTBOX.value】が空でない場合 ([B-3]) ├→[A-2] 【FORM.className】が[SERECT_1]であり且つ【TEXTBOX.value】が空である場合 ([A-3]) └→[B-2] 【FORM.className】が[SERECT_1]であり且つ【TEXTBOX.value】が空でない場合 ([B-3]) ├→[A-3] このイベントにより[A-3]になることは無い └→[B-3] このイベントにより[B-3]になることは無い J 【SUBMIT】からフォーカスが離れた 今のところ考慮せず K 【TEXTBOX】の内容が変更された change ├→[A-1] 【IMG2.src】が[2.png]であり、【TEXTBOX】が空でない場合 ([B-1]) └→[B-1] 【IMG2.src】が[2.png]であり、【TEXTBOX】が空である場合 ([A-1]) ├→[A-2] 【TEXTBOX.value】が空であり、【IMG1.src】が[B-2]である場合 ([B-2]) └→[B-2] 【TEXTBOX.value】が空でなく、【IMG1.src】が[A-2]である場合 ([A-2]) ├→[A-3] 【TEXTBOX.value】が空であり、【IMG1.src】が[B-3]（か[A-3]）である場合 ([B-3]) └→[B-3] 【TEXTBOX.value】が空でなく、【IMG1.src】が[A-3]（か[A-3]）である場合 ([A-3]) //ボツ├→[A-3] このイベントにより[A-3]になることは無い //ボツ└→[B-3] このイベントにより[B-3]になることは無い //ボツ├→[他1] 【TEXTBOX.value】が空であり、【IMG1.src】が[B-3]または[B-3_k]であるときは、[A-3]と同じ内容で名前の違う[A-3_k]に書き換える //ボツ└→[他2] 【TEXTBOX.value】が空でなく、【IMG1.src】が[A-3]または[A-3_k]であるときは、[B-3]と同じ内容で名前の違う[B-3_k]に書き換える
<html><head>
<script type="text/JavaScript" src="sample.js"></script>
<style type="text/css"><!-- .SERECT_1{background:gray;} --></style>
</head><body>
<form id="FORM" class="SERECT_0">
<input type="text" value="" id="TEXTBOX" />
<button type="submit" id="SUBMIT"><img src="A-1.gif" id="IMG1" /></button>
<button type="reset" id="RESET"><img src="1.png" id="IMG2" /></button>
</form>
</body></html>//(IMG2.src=='2.png')とした場合、IMG2のsrcに'2.png'が入っていてもfalseしか返ってこない。 //TEXTBOXのvalueは正しく参照できるのに… 仕方が無いのでaltを使ってみたら、うまくいった。でも画像を入れ替えるたびにaltも書き換えないといけない。 //AとBは、FORMへ指定しても動作しなかったのでとりあえずTEXTBOXへ指定。 //onchangeはテキスト入力時ではなく書く定時にしか働かないらしい。でもこれは絶対にあきらめられない。同じ機能をgooかどっかで見たことがあるから、できるはず。 //keyupが候補か？ //やった！できた！！！ //Kで(IMG1.src=='B-3.gif'||IMG1.src=='A-3.gif')というふうに[A-3]と[B-3]を両方通してあるのは、素早くキーを押された場合にも正しい結果を返すため。（altも同じように指定しないと予期しない結果になる可能性有り） //常に全ての状況から判断してるわけではなく、ぶつ切りで別々に処理し、他の処理が残した痕跡を頼りに状況判断するため、どこか間違いがあると全体に影響を与える。 window.onload = function() {[/span]//ローカル変数を定義[/span] var FORM = document.getElementById ('FORM'); var TEXTBOX = document.getElementById ('TEXTBOX'); var SUBMIT = document.getElementById ('SUBMIT'); var RESET = document.getElementById ('RESET'); var IMG1 = document.getElementById ('IMG1'); var IMG2 = document.getElementById ('IMG2'); //A 【FORM】（子孫を含む）が選択状態になった TEXTBOX.onfocus = function () {FORM.className='SERECT_1'; if (IMG2.alt=='2') {IMG1.src = (TEXTBOX.value=='')?'A-1.gif':'B-1.gif'; IMG1.alt = (TEXTBOX.value=='')?'A-1':'B-1';} else if ((TEXTBOX.value=='')&&(IMG1.alt!='A-3')){IMG1.src = 'A-2.gif'; IMG1.alt = 'A-2';} else if ((TEXTBOX.value!='')&&(IMG1.alt!='B-3')){IMG1.src = 'B-2.gif'; IMG1.alt = 'B-2';}} //B 【FORM】の選択状態が解除された TEXTBOX.onblur = function () {FORM.className='SERECT_0'; if ((TEXTBOX.value=='')&&(IMG1.alt!='A-3')){IMG1.src = 'A-1.gif'; IMG1.alt = 'A-1';} else if ((TEXTBOX.value!='')&&(IMG1.alt!='B-3')){IMG1.src = 'B-1.gif'; IMG1.alt = 'B-1';}} //C 【RESET】にマウスカーソルが乗った RESET.onmouseover = function () {{IMG2.src='2.png'; IMG2.alt='2';} if (TEXTBOX.value=='') {IMG1.src = 'A-1.gif'; IMG1.alt = 'A-1';} else if (TEXTBOX.value!='') {IMG1.src = 'B-1.gif'; IMG1.alt = 'B-1';}} //D 【RESET】にフォーカスが合わされた（今のところ考慮せず） //E 【RESET】からマウスカーソルが離れた RESET.onmouseout = function () {{IMG2.src='1.png';IMG2.alt='1';} if (FORM.className!='SERECT_1') {IMG1.src = (TEXTBOX.value=='')?'A-1.gif':'B-1.gif'; IMG1.alt = (TEXTBOX.value=='')?'A-1':'B-1';} else {IMG1.src = (TEXTBOX.value=='')?'A-2.gif':'B-2.gif'; IMG1.alt = (TEXTBOX.value=='')?'A-2':'B-2';}} //F 【RESET】からフォーカスが離れた（今のところ考慮せず） //G 【SUBMIT】にマウスカーソルが乗った SUBMIT.onmouseover = function () {{IMG1.src = (TEXTBOX.value=='')?'A-3.gif':'B-3.gif'; IMG1.alt = (TEXTBOX.value=='')?'A-3':'B-3';}} //H 【SUBMIT】にフォーカスが合わされた（今のところ考慮せず） //I 【SUBMIT】からマウスカーソルが離れた SUBMIT.onmouseout = function () { if (FORM.className!='SERECT_1') {IMG1.src = (TEXTBOX.value=='')?'A-1.gif':'B-1.gif'; IMG1.alt = (TEXTBOX.value=='')?'A-1':'B-1';} else {IMG1.src = (TEXTBOX.value=='')?'A-2.gif':'B-2.gif'; IMG1.alt = (TEXTBOX.value=='')?'A-2':'B-2';}} //J 【SUBMIT】からフォーカスが離れた（今のところ考慮せず） //K 【TEXTBOX】の内容が変更された TEXTBOX.onkeyup = function () { if (IMG2.alt=='2') {IMG1.src = (TEXTBOX.value=='')?'A-1.gif':'B-1.gif'; IMG1.alt = (TEXTBOX.value=='')?'A-1':'B-1';} else if (TEXTBOX.value=='') {IMG1.src = (IMG1.alt=='B-3'||IMG1.alt=='A-3')?'A-3.gif':'A-2.gif'; IMG1.alt = (IMG1.alt=='B-3'||IMG1.alt=='A-3')?'A-3':'A-2';} else if (TEXTBOX.value!='') {IMG1.src = (IMG1.alt=='A-3'||IMG1.alt=='B-3')?'B-3.gif':'B-2.gif'; IMG1.alt = (IMG1.alt=='A-3'||IMG1.alt=='B-3')?'B-3':'B-2';}} }
/*@cc_on@*/
if (document.implementation &&
/*@if (@_jscript_version > 5.5) @else@*/
document.implementation.hasFeature ('HTML' , '2.0') &&
document.implementation.hasFeature ('HTMLEvents' , '2.0') &&
document.implementation.hasFeature ('MouseEvents', '2.0') &&
/*@end@*/
true)
/*@if (@_jscript) attachEvent ('on' + @else@*/
addEventListener (/*@end@*/ 'load', function (event) {
var sourceData = {
// 使用するノードにラベルを張っておく
form : document.getElementById ('FORM'),
textbox : document.getElementById ('TEXTBOX'),
submit : document.getElementById ('SUBMIT'),
reset : document.getElementById ('RESET'),
image1 : document.getElementById ('IMG1'),
image2 : document.getElementById ('IMG2'),
getState : function () {
return (this.textbox.value == '') ? 'blank' : 'non-blank';
},
observeEvent : function (targetLabel, eventType) {
var listener = function (event) {
arguments.callee.prototype.handleEvent (event);
};
listener.prototype = {
sourceData : this,
targetLabel : targetLabel,
eventType : eventType,
handleEvent : function (event) {
var data = this.sourceData;
var action = data.actions[ data.getState () ];
if (action) {
var listener = action[ this.targetLabel ];
if (listener) {
var handler = listener[ this.eventType ];
if (handler) {
handler.call (data, event);
}
}
}
}
};
this[targetLabel]./*@if (@_jscript) attachEvent ('on' + @else@*/
addEventListener (/*@end@*/ eventType, listener, false);
listener = targetLabel = eventType = null;
},
actions : {
'blank' : { // テキストボックスに入力値がない場合
'reset' : {
'mouseover' : function (event) {
this.image1.src = 'A-1.gif';
this.image2.src = '2.png';
},
'mouseout' : function (event) {
this.image1.src = (this.form.className != 'SECRET_1') ? 'A-1.gif' : 'A-2.gif';
this.image2.src = '1.png';
}
},
'submit' : {
'mouseover' : function (event) {
this.image1.src = 'A-1.gif';
this.image2.src = '1.gif';
},
'mouseout' : function (event) {
this.image1.src = (this.form.className != 'SECRET_1') ? 'A-1.gif' : 'A-2.gif';
}
},
'textbox' : {
'focus' : function (event) {
this.image1.src = ( this.image2.src.match (/2\.gif/)) ? 'A-1.gif' :
(! this.image2.src.match (/A-3\.gif/)) ? 'A-2.gif' :
this.image1.src;
},
'blur' : function (event) {
this.form.className = 'SECRET_0';
this.image1.src = (! this.image2.src.match (/A-3\.gif/)) ? 'A-1.gif' :
this.image1.src;
},
'keyup' : function (event) {
this.image1.src = (this.image2.src.match (/2\.gif/)) ? 'A-1.gif' :
(this.image1.src.match (/[AB]-3\.gif/)) ? 'A-3.gif' :
'A-2.gif';
}
}
},
'non-blank' : { // テキストボックスに入力値がある場合
'reset' : {
'mouseover' : function (event) {
this.image1.src = 'B-1.gif';
this.image2.src = '1.gif';
},
'mouseout' : function (event) {
this.image1.src = (this.form.className != 'SECRET_1') ? 'B-1.gif' : 'B-2.gif';
this.image2.src = '1.gif';
}
},
'submit' : {
'mouseover' : function (event) {
this.image1.src = 'A-3.gif';
},
'mouseout' : function (event) {
this.image1.src = (this.form.className != 'SECRET_1') ? 'B-1.gif' : 'B-2.gif';
}
},
'textbox' : {
'focus' : function (event) {
this.image1.src = ( this.image2.src.match (/2\.gif/)) ? 'B-1.gif' :
(! this.image2.src.match (/B-3\.gif/)) ? 'B-2.gif' :
this.image1.src;
},
'blur' : function (event) {
this.form.className = 'SECRET_0';
this.image1.src = (! this.image1.src.match (/B-3\.gif/)) ? 'B-1.gif' :
this.image1.src;
},
'keyup' : function (event) {
this.image1.src = (this.image2.src.match (/2\.gif/)) ? 'B-1.gif' :
(this.image1.src.match (/[AB]-3\.gif/)) ? 'B-3.gif' :
'B-2.gif';
}
}
}
}
};
sourceData.observeEvent ('textbox', 'focus' );
sourceData.observeEvent ('textbox', 'blur' );
sourceData.observeEvent ('textbox', 'keyup' );
sourceData.observeEvent ('reset' , 'mouseover');
sourceData.observeEvent ('reset' , 'mouseout' );
sourceData.observeEvent ('submit' , 'mouseover');
sourceData.observeEvent ('submit' , 'mouseout' );
sourceData = null;
/*@if (@_jscript) detachEvent ('on' + @else@*/
removeEventListener (/*@end@*/ 'load', arguments.callee, false);
}, false);