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

スポンサーリンク

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

f:id:kojikoji75:20150801224631j:plain

1.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>

2.body内へ記述

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

3.sample

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

f:id:kojikoji75:20130730171827j:plain

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

f:id:kojikoji75:20130730171845j:plain

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

jQuery 仕事の現場でサッと使える! デザイン教科書 (Webデザイナー養成講座)

Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る (Books for Web Creative)

Webデザイナーのための jQuery入門 魅力的なユーザーインターフェースを手軽に作る (Books for Web Creative)

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)

Web制作の現場で使う jQueryデザイン入門 (WEB PROFESSIONAL)

タイトルとURLをコピーしました