9月 30

「カーソルを合わせると文字が消えるフォーム」を作る方法

JavaScript • jQuery • プログラミング Add comments 935 PVs
Posted at 14:30 by Hiro

本ブログの検索窓（画面右上）のように、カーソルを合わせると文字が消えるフォームをよく見かけますね。jQueryを使ってこのようなフォームを簡単に作る方法を紹介したいと思います。search_form地域ホームページ下総中山に組み込まれているGoogle/Yahoo!の検索窓（右図）も、ここで紹介しているjQueryを使っています。


サンプルとして紹介するHTMLの基本構造は以下のようなものです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
 "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
//<![CDATA[
$(function() {
    // ここに書かれるjQueryのコードは後ほど...
});
//]]>
</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>

18行目のinput#sampleのようにpaddingを設定しないと、フォーカスが当たった／外れたときに微妙にフォームの配置位置がずれてしまうので注意！

テキストフォームにメッセージを表示させる例

まずは最も単純なパターンから。フォームにフォーカスが当たっておらず、かつフォームに何も入力されていない場合にのみ、「キーワードを入力してください」というメッセージを表示するようにします。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(function() {
  $('#sample')
    .focus(function() {
      if($(this).hasClass('dummy_text')) {
        $(this).removeClass().val('');
      }
    })
    .blur(function() {
      if($(this).val().length == 0) {
        $(this).addClass('dummy_text')
          .val('キーワードを入力してください');
      }
    })
    .blur();
});

こんな感じになります。

フォームにイメージを表示させる例

今度はテキストの代わりにイメージを表示させる方法です。まず、フォーカスが当たっていないときに表示させたいイメージファイルを作りましょう。ここでは、地域ホームページ下総中山のGoogle用検索窓のイメージを使います。イメージの高さを18pxくらいにしておくとフォームにしっくりはまります。

続いて、以下のようなCSSを書き足しましょう。

input.dummy_image {
  background:url("bg_search_google.gif") no-repeat 4px;
}

bg_search_google.gifの部分は、用意したイメージへのURLに適宜置き換えてください。また、最後の4pxも用意したイメージに応じて微調整が必要です。

ではjQueryのコードです。

1
2
3
4
5
6
7
8
9
10
11
12
13
14

$(function() {
  $('#sample')
    .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に変えればいいのでは？と思い、テキストフォームの例を以下のように変えてみました。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

$(function() {
  $('#sample')
    .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('キーワードを入力してください');
      }
    })
    .blur();
});

残念ながらこれはうまくいきませんでした。input要素のtype属性は後から操作することができないようです。

「パスワードを入力してください」という文字をイメージとして作成すれば、「フォームにイメージを表示させる例」を使って実現することはできますが、表示メッセージ毎にイメージを作成するのはナンセンスです。

パスワードフォームにメッセージを表示させるにはちょっと工夫しなければなりません。最初にHTML上でinput要素のtype属性をpasswordに変更します。

25
26
27
28
29

</head>
<body>
<input type="password" id="sample" value="" />
</body>
</html>

続いて、以下のCSSクラスを追加します。

span.dummy_password {
  color:#888;
  font-size:10pt;
  position:absolute;
  padding:4px;
}

positionプロパティをabsoluteにしてtopプロパティやleftプロパティはjQueryで後から変更します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

$(function() {
  function make_dummy_password(obj, msg)
  {
    var pos = obj.offset();
    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'), 'パスワードを入力してください');
  $('#sample_password')
    .focus(function() {
      dummy_password.hide();
    })
    .blur(function() {
      if($(this).val().length == 0) {
        dummy_password.show();
      }
    })
    .blur();
});

こんな感じでパスワードフォームにメッセージが表示できるようになります。

9行目のclick()ハンドラの実装を忘れると、「パスワードを入力してください」というメッセージにフォーカスが当たってしまい、パスワードフォームにフォーカスが当たらなくなってしまうので注意！

タグ: • • • • • • • • • •

コメントをどうぞ