jQueryで簡単にテキストボックス内に透かし文字の補足を入れる方法
入力前はテキストボックス内に説明文がうっすらと見えた状態で、クリックすると説明文が消えるというアレを社内システムに実装してみたのでメモ。親切なUIを実現するために欠かせない小技の一つです。
１．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
フォーカス前はうっすらと説明文が見える
フォーカス時に説明文はクリアされる
あわせて読みたい
BootStrap 向けのdatepickerによるカレンダー実装は簡単便利 だけどieには不向きか - TechNote
BootStrap向けのdatepickerによるカレンダー実装が簡単かつ便利だったので使用方法をメモ。1.ダウンロード現在はちゃんと日本語対応版も出ているよう...
jQueryで簡単にフワッと画像を表示させる lazyload.jsの実装方法 - TechNote
よくWebサイト上で見かける、画面をスクロールしていくとフワッと画像が現れてくるあの小技です。いつか自分も使う機会があったら使ってみようと思っていましたが、本日...
jQueryで簡単にメッセージをスーッと消す setTimeoutの実装方法 - TechNote
Web上でときどき見る「登録しました」などのメッセージ表示エリアがスーッと消えてなくなる動きを自分もやってみた。簡単ながら社内システムなどで今後も使えそうなので...
