社内SEの徒然なる日記

javaScriptでラベルの値を変更する方法

タイトル詐欺です

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

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

まず、こんな画面があったとします。
名前変更ラベル1

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

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;
}


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

スポンサードリンク

2013.3.14追記
コメントで変更する方法を教えて頂きましたので、新しく記事を書きました。
下記のリンクからご覧ください。
javaScriptでラベルの値を変更する方法(真)

--- blog end ---



スポンサードリンク

PageTop

コメント


管理者にだけ表示を許可する
 

document.getElementsByTagName("LABEL")[0].innerText="変えました"

名無し | URL | 2013-03-13(Wed)14:16 [編集]


Re: タイトルなし

> document.getElementsByTagName("LABEL")[0].innerText="変えました"
ありがとうございます!
きちんとプロパティが用意されていたんですね。
教えて頂いた内容を元に、新しく記事を作成させて頂きましたので、よろしければご覧ください。

たかたかハリコフ | URL | 2013-03-14(Thu)10:31 [編集]