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

入力前はテキストボックス内に説明文がうっすらと見えた状態で、クリックすると説明文が消えるというアレを社内システムに実装してみたのでメモ。親切なUIを実現するために欠かせない小技の一つです。

f:id:kojikoji75:20150801224631j:plain

１．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

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

f:id:kojikoji75:20130730171827j:plain

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

f:id:kojikoji75:20130730171845j:plain

TechNote

事務屋のおぼえがき

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

１．head内で読み込み

２．body内へ記述

３．sample

あわせて読みたい