フォームデザイン（focus/blurイベントの例）

jQuery フォームデザイン

以前やった「イベントの操作」のとこでなんで出てこなかったのか理解できないが、
入力タグがフォーカスを受け取ったとき、フォーカスを失った時に発生するイベント。

前のエントリーに、Emailの入力タグがフォーカスを受け取ったら説明を右側に出し、フォーカスを失ったら消すようにしてみた。

<html>
  <head>
    <script type="text/javascript" src="http://www.google.com/jsapi"></script>
    <script type="text/javascript">google.load("jquery", "1.3.2");</script>
    <script type="text/javascript">
      $(function(){
        $("#address").focus(function() {
          $("#address_msg").text("Emailアドレスを入力してください。");
        }).blur(function() {
          $("#address_msg").text("");
        });
      })
    </script>
  </head>
  <body>
    <input id="address" class="discription" type="text" value="hogeo@hoge.jp" />
    <span id="address_msg"></span><br/>
    <input id="subject" class="discription" type="text" value="ぱんぱかぱんつ♪" /><br/>
    <select id="mode" class="discription">
      <option value=""></option>
      <option value="RedPig">赤ブタ</option>
      <option value="BluePig">青ブタ</option>
      <option value="GreenPig">緑ブタ</option>
    </select><br/>
    <textarea id="body" class="discription" >
ぱんぱか
ぱんつで
    </textarea><br/>
    <input id="send" type="button" value="確認" />
    <input id="clear" type="button" value="クリア" />
  </body>
</html>