このサンプルは、jQueryのapiを利用してテキストボックスに「すかし文字」を表示します。テキストボックスにフォーカスを移動すると「すかし文字」が消えます。テキストボックスに何も入力しない状態でフォーカスを外すと「すかし文字」が再表示されます。このサンプルは、テキストボックスのヘルプ情報を表示したいときに利用すると便利です。
input(text)要素のclass属性に「water」を設定します。valueとtitle属性には、ヘルプ情報を設定します。ここでは、「Type Your Name」を設定しています。
<input id="txtName" type="text" class="water"
value="Type Your Name" title="Type Your Name" />
// フォーカス取得時のイベント処理:
$('.water').focus(function () {
$tb = $(this);
// input(text)の値が変更されていないか？
if ($tb.val() == this.title) {
$tb.val(''); // ヘルプ情報を削除
$tb.removeClass('water'); // CSSクラスを削除
}
});
// フォーカス喪失時のイベント処理:
$('.water').blur(function () {
$tb = $(this);
// input(text)の値が空か？
if ($.trim($tb.val()) == '') {
$tb.val(this.title); // title属性値を設定
$tb.addClass('water'); // CSSクラスを追加
}
});