input に onfocus で背景色や文字を消す

それでは早速、下のサンプルのソースをご覧ください。

<input type="text" class="hajime_search" onfocus="if (this.value == 'サンプル検索窓') this.value = ''; this.style.background = '#fff';" onblur="if (this.value == '') this.value = 'サンプル検索窓'; this.style.background = '#f1f1f1';" value="サンプル検索窓" />

少し見辛いと思いますが、上のソースの赤い部分が必要なソースです。ソースについて簡単に説明すると onfocus とはイベントハンドラ（event handler）の１つです。イベントハンドラとは JavaScript で記述された特定の処理を、ユーザーのマウス操作や特定の条件が発生した時に実行させる為の記述で HTML のタグに記述できる特殊な属性です。

つまり onfocus とはマウスカーソルの焦点（ピント）が合っている時に特定の処理を与える為のイベントハンドラで、今回使用しているもう１つのイベントハンドラ onblur はその onfocus が外れた時に特定の処理を与える為のイベントハンドラです。

JavaScript の込み入った話しは今回は割愛させて頂くとして input 要素の value 属性（初期値）にセットした言葉「サンプル検索窓」を onfocus と onblur によって表示・非表示を切り替えています。

また、背景色も CSS で初期カラーを指定しておき、テキストの時と同じように onfocus と onblur で切り替えています。

実は背景色だけなら CSS の疑似クラスの１つ focus でも実現可能なのですが IE6 と IE7 共に未対応なので今のところ JavaScript での実装が有効な手段だと思います。

onfocus="if (this.value == 'テキスト') this.value = ''; this.style.background = 'フォーカス時のカラー';" onblur="if (this.value == '') this.value = 'テキスト'; this.style.background = '初期カラー';" value="テキスト"

上のソースを input タグの中にコピー＆ペーストし、「テキスト」部分には３箇所同じ語句を入れ、「フォーカス時のカラー」と「初期カラー」に RGB などで色を指定することで、サンプルと同じようなテキストボックスが出来るので興味のある方はお試しください。

まだ試していないのではっきりとは言えませんが、同じ方法で input 要素の背景に画像なんかも表示させられそうですね。今度試してみます。

※サンプル検索窓の背景色の初期カラーやテキストカラー・サイズなどは外部 CSS で指定し input タグ内の class 属性で適用しています。

■追記
イベントハンドラは今回紹介しただけではありませんし input 要素以外にも記述できます。色々試してみると楽しいかも知れませんよ。また機会があったらご紹介したいと思います。取り敢えず次のエントリでイベントハンドラの一覧表を掲載しておきます。