SQLの窓

2014年03月06日


JavaScript による2会話アプリケーションのコントロール(2)

▼ pass1 開始 ボタンと pass2 開始 ボタンをクリックして下さい。


 
------------------------------






class 属性を使用して、会話グループ単位に使用可能にしたり使用不能にしたりします

<script type="text/javascript">
function passControl(idstr,pass,enable) {
	var x = window[idstr];
	for( var i = 0; i < x.length; i++ ) {
		if ( x[i].className == pass ) {
			if ( (x[i].tagName).toUpperCase() == 'INPUT' ) {
				if ( (x[i].type).toUpperCase() == 'TEXT' ) {
					if ( enable ) {
						x[i].readOnly = false;
						x[i].style.backgroundColor = "#DCF2F5";
					}
					else {
						x[i].readOnly = true;
						x[i].style.backgroundColor = "#ccc";
					}
				}
				if ( (x[i].type).toUpperCase() == 'BUTTON' ) {
					if ( enable ) {
						x[i].disabled = false;
					}
					else {
						x[i].disabled = true;
					}
				}
			}
			if ( (x[i].tagName).toUpperCase() == 'TEXTAREA' ) {
				if ( enable ) {
					x[i].readOnly = false;
					x[i].style.backgroundColor = "#DCF2F5";
				}
				else {
					x[i].readOnly = true;
					x[i].style.backgroundColor = "#ccc";
				}
			}
			if ( (x[i].tagName).toUpperCase() == 'SELECT' ) {
				if ( enable ) {
					x[i].disabled = false;
				}
				else {
					x[i].disabled = true;
				}
			}
		}
	}
}
function getFormEntry(idstr) {

	// 親要素
	var js_form = document.getElementById(idstr);

	// 配列
	var arr = new Array();

	// input
	var wk = js_form.getElementsByTagName("input");
	for( i = 0; i < wk.length; i++ ) {
		arr.push( wk[i] );
	}

	// textarea
	var wk = js_form.getElementsByTagName("textarea");
	for( i = 0; i < wk.length; i++ ) {
		arr.push( wk[i] );
	}

	// select
	var wk = js_form.getElementsByTagName("select");
	for( i = 0; i < wk.length; i++ ) {
		arr.push( wk[i] );
	}

	window[idstr] = arr;
	console.dir( window[idstr] );

}
</script>
<style type="text/css">
#js_form2 {
	width: 400px;
	padding: 20px;
	border: 1px solid #888;
	border-radius: 10px;
}
</style>
<input type="button" value="pass1 開始" onclick='passControl("js_form2","pass1",true);passControl("js_form2","pass2",false)'>
<input type="button" value="pass2 開始" onclick='passControl("js_form2","pass1",false);passControl("js_form2","pass2",true)'>
<br><br>
<pre id="js_form2">
<input type="text" id="in01" class="pass1"> <input type="button" id="bt01" value="第1会話ボタン" class="pass1">
------------------------------
<input type="text" id="in02" class="pass2">
<input type="text" id="in03" class="pass2">
<textarea id="tx01" class="pass2"></textarea>
<select id="cb01" class="pass2">
<option value="001">001</option>
<option value="002">002</option>
</select>

<input type="button" id="bt02" value="第2会話ボタン" class="pass2">
</pre>
<script type="text/javascript">
getFormEntry("js_form2");
</script>
関連する記事

JavaScript による2会話アプリケーションのコントロール(1)


【JavaScriptの最新記事】
posted by lightbox at 2014-03-06 21:25 | JavaScript | このブログの読者になる | 更新情報をチェックする
container 終わり

フリーフォントで簡単ロゴ作成
フリーフォントでボタン素材作成
フリーフォントで吹き出し画像作成
フリーフォントではんこ画像作成
ほぼ自由に利用できるフリーフォント
フリーフォントの書体見本とサンプル
画像を大きく見る為のウインドウを開くボタンの作成

CSS ドロップシャドウの参考デモ
BUTTONS (CSS でボタン)
イラストAC
ぱくたそ
写真素材 足成
フリーフォント一覧
utf8 文字ツール
右サイド 終わり
base 終わり