TechNote

とあるエンジニアのただのメモ

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

あわせて読みたい

BootStrap 向けのdatepickerによるカレンダー実装は簡単便利 だけどieには不向きか - TechNoteBootStrap 向けのdatepickerによるカレンダー実装は簡単便利 だけどieには不向きか - TechNote

BootStrap向けのdatepickerによるカレンダー実装が簡単かつ便利だったので使用方法をメモ。1.ダウンロード現在はちゃんと日本語対応版も出ているよう...

jQueryで簡単にフワッと画像を表示させる lazyload.jsの実装方法 - TechNotejQueryで簡単にフワッと画像を表示させる lazyload.jsの実装方法 - TechNote

よくWebサイト上で見かける、画面をスクロールしていくとフワッと画像が現れてくるあの小技です。いつか自分も使う機会があったら使ってみようと思っていましたが、本日...

jQueryで簡単にメッセージをスーッと消す setTimeoutの実装方法 - TechNotejQueryで簡単にメッセージをスーッと消す setTimeoutの実装方法 - TechNote

Web上でときどき見る「登録しました」などのメッセージ表示エリアがスーッと消えてなくなる動きを自分もやってみた。簡単ながら社内システムなどで今後も使えそうなので...



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

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

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

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