本ブログの検索窓（画面右上）のように、カーソルを合わせると文字が消えるフォームは最近よく見かける。jQueryを使ってこのフォームを作るにはどうしたらいいか。基本テクニックと応用テクニックを紹介しておこう。
サンプルとして紹介するHTMLの基本構造はこんな感じ。
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery.js"></script>
<script type="text/javascript">
$(function() {
// Implement later...
});
</script>
<style type="text/css">
input#sample {
width:200px;
padding:2px;
}
input.dummy_text {
color:#888;
}
</style>
</head>
<body>
<input type="text" id="sample" value="" />
</body>
</html>
12行目のinput#sampleのようにpaddingを設定しないと、フォーカスが当たった／外れたときに微妙にフォームの配置位置がずれてしまうので注意！
テキストフォームにメッセージを表示させる
まずは最も単純なパターンから。フォームにフォーカスが当たっておらず、かつフォームに何も入力されていない場合にのみ、「Input a keyword here」というメッセージを表示する。
$(function() {
$('#sample_text').focus(function() {
if($(this).hasClass('dummy_text')) {
$(this).removeClass().val('');
}
})
.blur(function() {
if($(this).val().length == 0) {
$(this).addClass('dummy_text').val('Input a keyword here');
}
})
.blur();
こんな感じになる。
フォームにイメージを表示させる
テキストの代わりにイメージを表示させる方法。まず、フォーカスが当たっていないときに表示させたいイメージファイルを作っておく。イメージの高さを18pxくらいにしておくとフォームにしっくりはまってくれる。
そして以下のようなCSSを書き足す。
input.dummy_image {
background:url("bg_search_google.gif") no-repeat 4px;
}
bg_search_google.gifの部分は用意したイメージへのURL。また、最後の4pxも用意したイメージに応じて微調整が必要。
で、jQueryのコード。
$(function() {
$('#sample_image') .focus(function() {
if($(this).hasClass('dummy_image')) {
$(this).removeClass();
}
})
.blur(function() {
if($(this).val().length == 0) {
$(this).addClass('dummy_image');
}
})
.blur();
});
テキストの例とほぼ同じ。フォーム内に表示させるものをval()で指定するか、CSSで背景として指定するかの違い。
パスワードフォームにメッセージを表示させる
テキストフォームにメッセージを表示させた例で扱ったフォームはinput要素のtype属性がtextだったが、type属性がpasswordだった場合val()で渡したテキストはマスクされてしまい、ユーザーにまったくメッセージが伝わらなくなってしまう。val()でメッセージを渡す際に、type属性をtextからpasswordに変えればいいのでは？と思い、テキストフォームの例を以下のように変えてみた。
$(function() {
$('#sample_text').focus(function() {
if($(this).hasClass('dummy_text')) {
$(this).removeClass().attr('type', 'password').val('');
}
})
.blur(function() {
if($(this).val().length == 0) {
$(this).addClass('dummy_text').attr('type', 'text').val('Input your password here');
}
})
.blur();
});
残念ながらこれはうまくいかない。input要素のtype属性は後から操作することができないようだ。
「Input your password here」という文字をイメージとして作成すれば、フォームにイメージを表示させた例で実現することはできるが、表示メッセージ毎にイメージを作成するのはナンセンス。
パスワードフォームにメッセージを表示させるにはちょっと工夫しなければならない。最初にHTML上でinput要素のtype属性をpasswordに変更しておく。
</head> <body> <input type="password" id="sample" value="" /> </body> </html>
次にCSSクラスを1つ追加。
span.dummy_password {
color:#888;
font-size:10pt;
position:absolute;
padding:4px;
}
positionプロパティをabsoluteにしてtopプロパティやleftプロパティはjQueryで後から変更する。
$(function() {
function make_dummy_password(obj, msg)
{
var pos = obj.position();
var dummy = $('<span>');
dummy.text(msg)
.addClass('dummy_password')
.css({top:pos.top,left:pos.left})
.click(function() { obj.focus(); });
$('body').append(dummy);
return dummy;
}
var dummy_password = make_dummy_password($('#sample_password'), 'Input your password here');
$('#sample_password').focus(function() {
dummy_password.hide();
})
.blur(function() {
if($(this).val().length == 0) {
dummy_password.show();
}
})
.blur();
});
こんな感じでパスワードフォームにメッセージが表示できるようになった。
9行目のclick()ハンドラの実装を忘れると、「Input your password here」というメッセージにフォーカスが当たってしまい、パスワードフォームにフォーカスが当たらなくなってしまうので注意！