（元）社内SEの徒然なる日記

javaScriptを使用して、HTMLのラベルの値を変更したかったのですが、どうしてもやり方が分らなかったので、疑似的に実現することにしました。
はい、タイトルの「ラベルの値を変更」ってのは嘘で、正しくは、「ラベルの値を変更しているように見せかける」ですね。

やりたいのは、こういう事です。

まず、こんな画面があったとします。


んで、「変更」ボタンを押すと、下記のように値を変更させるって事です。



htmlは、こんな感じでした。

<br>
<INPUT tabindex="-1" value="000" name="testCode" Style="width:30px;">
<LABEL>テスト</LABEL>
<br><br>
<INPUT type="button" value="変更" Style="width: 80px;" onClick="JavaScript:testSelect();">

繰り返しになりますが、変更ボタン押下時に実行しているjavaScriptでは、LABELタグの値を変更することが、出来なかったんですよね。
もしかしたら、技があるのかもしれませんが、私には発見できませんでした。

そこで、スパッとLABELタグを使用することを諦めました。


LABELタグをINPUTタグで書き直しました。

<br>
<INPUT tabindex="-1" value="000" name="testCode" Style="width:30px;">
<INPUT value="テスト" name="testName" readOnly="readOnly"
Style="width:190px;border-style:none;background-color:transparent;">
<br><br>
<INPUT type="button" value="変更" Style="width: 80px;" onClick="JavaScript:testSelect();">

問題は、入力が出来てしまう、枠線が見える、背景色が異なるってことです。
という訳で、これら問題の機能を封印していきます。

まず、readOnly="readOnly"で、入力不可にします。

今度は、Style属性で枠線を消してやります。
border-styleは、枠線の書式を一括設定できます。こいつにnone を指定してあげると、枠線が表示されなくなります。

最後に、背景色を透明にします。こいつもStyle属性で設定します。
背景色を設定するbackground-colorに、transparentを設定することで透明になります。

これで、一見ラベルに見える、テキストの完成です。

※　ここでは省略しましたが、実際にはタブも当らないように、tabIndex="-1"も必要ですかね。


この手のスタイルを直接指定するのは、あんまりよくない気がするので、スタイルシートで定義することにしました。

まず、スタイルシートにこんなのを追加します。

.inputLabel {border-style:none;background-color:transparent;}

htmlは、こんな感じに修正します。

<br>
<INPUT tabindex="-1" value="000" name="testCode" Style="width:30px;">
<INPUT class="inputLabel" value="テスト" name="testName" readOnly="readOnly"
Style="width:190px;">
<br><br>
<INPUT type="button" value="変更" Style="width: 80px;" onClick="JavaScript:testSelect();">

readOnlyは、スタイルじゃないのでそのまま残します。


余談ですが、変更ボタン押下時のjavaScriptは、こんな感じです。

function testSelect() {

	if (document.all.testCode.value == '999') {
		document.all.testCode.value = '000';
		document.all.testName.value = 'テスト';
	} else {
		document.all.testCode.value = '999';
		document.all.testName.value = '変えました！';
	}

	return true;
}

まぁ、特に説明も必要ないですよね？


スポンサードリンク