jQueryで簡単にテキストボックス内に透かし文字の補足を入れる方法

１．head内で読み込み

以下のようにjquery本体を読み込んだ後にwater関連を記述。
「water.js」などの名前の別ファイルにして外出しする方が後々管理しやすい。

<script src="js/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript>"
$(function () {  
  
  $('.water').each(function () {  
    $tb = $(this);  
    if ($tb.val() != this.title) {  
      $tb.removeClass('water');  
    }  
  });  
    
  $('.water').focus(function () {  
    $tb = $(this);  
    if ($tb.val() == this.title) {  
      $tb.val('');  
      $tb.removeClass('water');  
    }  
  });  
  $('.water').blur(function () {  
    $tb = $(this);  
    if ($.trim($tb.val()) == '') {  
      $tb.val(this.title);  
      $tb.addClass('water');  
    }  
  });  
   
});
</script>

２．body内へ記述

<input type="text" class="water" value="検索したい単語を入力" title="検索したい単語を入力">

３．sample

フォーカス前はうっすらと説明文が見える

フォーカス時に説明文はクリアされる