JavaScriptを使って検索欄等の背景色や文字を消したり変えたりする方法

ブログの検索欄やコメント欄の見栄えを良くしたいと思ったことはないですか？

よくブログ等の検索欄で、 “Search” や”検索”、コメント欄で “コメントをどうぞ” という文字が表示されていて、クリックをすると消えるのを見かけると思います。
JavaScriptの “onfocus” を使用します。

onfocus属性とonblur属性は、 よく組み合わせて使われるイベントハンドラ（JavaScriptで記述された、マウスの動きといった動作・操作に対して特定の処理を与えるための命令のこと）です。
例えば、検索欄がクリックされるなどして、選択された状態になることを「フォーカスがあたる」といいます。これらのイベントは、フォーカスを得た時（onfocus）、フォーカスを失った時（onblur）に発生します。
つまり、クリックされた時とされていない時のイベントを指定してあげます。

サンプルコード

<input style="background: #f1f1f1; color: #000; margin-left: 20px; padding: 0;
  width:300px; height: 30px;"
  onfocus="if (this.value == 'テスト検索欄') this.value = '';
  this.style.background = '#fff';"
  onblur="if (this.value == '') this.value = 'テスト検索欄';
  this.style.background = '#f1f1f1';
  this.style.color = '#000';"
  type="text" value="テスト検索欄"
/>

 という上記の感じになります。
styleは、直接書かずに外部cssファイルに書き、読み込んだ方がコードはすっきりすると思います。