サイト検索窓の文字色を、触れる前と入力する時で色を変えようとしています

質問

サイト検索窓の文字色を、触れる前と入力する時で色を変えようとしていますが、
うまくいかずに非常に困っております。

今のhtmlがこれです。

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

<form name="myform" action="http://www～～" method="post">
<input type="text" name="search_name" value="サイト内検索" id="uid" onfocus="if (this.value == 'サイト内検索') { this.value='' }" onblur="if (this.value == '') { this.value='サイト内検索' }" />
<input type="submit" value="検索" name="button" id="btn" class="fadeBtn" />
</form>

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

cssで<input>のcolorを指定したら、
入力する前の表示も、入力した時の表示も同じ色になりました。

そこで、調べた結果以下のようにonfocusとonblurにcolorを指定したのですが、
うまくいきませんでした。

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

<form name="myform" action="http://www～～" method="post">
<input type="text" name="search_name" value="サイト内検索" id="uid" onfocus="if (this.value == 'サイト内検索') { this.value='' } { this.style='color:#000000' }" onblur="if (this.value == '') { this.style='color:pink' } { this.value='サイト内検索' }" />
<input type="submit" value="検索" name="button" id="btn" class="fadeBtn" />
</form>

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

javaが必要なのでしょうか？
javaには詳しくないため、必要でしたら教えていただきたいです。
どうぞご回答お願いします・・・。

回答No.1

zeff · ベストアンサー

まずjavaと省略しないでください。
Javaと言うものが別にあるので、JavaScriptと区別しましょう。

<form name="myform" action="http://www～～" method="post">
<input type="text" name="search_name" value="サイト内検索" id="uid" style="color:pink"; onfocus="if (this.value == 'サイト内検索') { this.value=''; } this.style.color='#000000';" onblur="if (this.value == '') { this.style.color='pink'; this.value='サイト内検索'} " />
<input type="submit" value="検索" name="button" id="btn" class="fadeBtn" />
</form>

１．
this.style.color
２．
後半の{}の付け方に誤り。

お礼

ご回答頂きありがとうございます。
今後はjavaと略さないよう気をつけます。申し訳ありません。

教えて下さったhtmlにかえると上手くいったのですが、
後半の

this.style.color='pink';

をpinkから#dddや他の色にかえても反応せずpinkのままでした。

他の色に変更することは可能でしょうか？

ご回答お願い致します・・・

補足

何度もすみません。

style="color:pink";

に気づいておりませんでした。

こちらも#dddに変更するとちゃんとできました。

とても助かりました。
本当にありがとうございました！！！