Webデザインの勉強と製作 | あかとんぼ

フェリカテクニカルアカデミーの学習をベースに、Webについての勉強と製作の過程をまとめています。

[jQuery]⑥フォーム

jQuery
  • フォーム部品の値を取得変更する命令
    • val()
  • フォームに関するイベントの処理
    • focus() フォーカスされたことを感知
    • blur()　フォーカスが外れたことを感知
    • change() フォームの内容変更を感知
    • submit()　フォームの送信を感知
  • フォーム部品を選択するセレクター
    • :checked チェックが入っている要素のみ選択
    • :selected セレクトボックスで選択している要素だけを選択

val() フォーム部品の値を取得変更する

  • フォームに入力、選択された値(value属性の値)を取得、変更できる
  • select/option要素やtext area要素に対しても使える
フォーム入力値をボタンイベントとval()で取得、表示する
$(function(){
     $("button").click( function(){
          $("p").text($("input").val()+"にメールを送信します");
          $("button").text("送信");
     });
});
</script>
</head>
<body>
<p>メールアドレス：<input type="text" name="name"></p>
<button>確認</button>
</body>
フォームの内容を変更する
  • val(“”)を実行、input要素を書き換える
$(function(){
     $("button").click( function(){
          $("input").val("");
     });
});
</script>
</head>
<body>
<p>名前入力：<input type="text"><button>クリア</button></p>
</body>
</html>

focus() フォーカスされたことを感知

  • input要素をフォーカスするとvalueを空にしてテキスト削除
  • さらにCSSを操作し文字色を黒に変更
  • テキスト削除は最初の一度だけにしたいので、one()イベントを設定
$(function(){
     $("input").val("入力してください").css("color","#CCC").one("focus",function(){
          $(this).val("").css("color","#000");
     });
});
</script>
</head>
<body>
<p>名前入力：<input type="text" value=""></p>
</body>

blur()　フォーカスが外れたことを感知

例題：focusとblurを活用したフォーム
  • 最初はフォームにグレー文字で「入力してください」と表示
  • フォームにフォーカスされるとvalueを空にし、色を黒色にする
  • フォームのvalueが空(未入力)のままフォーカスが外れるとフォームにグレー文字で「入力してください」と表示
  • フォームのvalueが空でないなら、何もしない
$(function(){
  $("input").val("入力してください").css("color","#ccc").one("focus",function(){
     $(this).val("").css("color","#000000");
  }).blur(function(){ /*フォーカスが外れたとき*/
      if($(this).val()==""){ /*何も入力されていないなら*/
        $(this).val("入力してください").css("color","#ccc").one("focus",function(){
               $(this).val("").css("color","#000000");
          });
       }/*何か入力されているならそのまま*/
    });
});
</script>
</head>
<body>
<p>名前入力：<input type="text" value=""></p>
</body>

change() フォームの内容変更を感知

例題
  • 申込者：（個人or法人）
  • 個人を選ぶとフォームに「お名前」法人を選ぶと「会社名」
$(function(){
  $("select").change(function(){
       $("span").text($(this).val());
  });
});
</script>
</head>
<body>
<select>
     <option value="お名前">個人</option>
     <option value="会社名">法人</option>
</select>
<p><span>お名前</span><input type="text"></p>
</body>

submit()　フォームの送信を感知

  • フォームの送信ボタンがクリックされると発生するsubmitイベントの処理を設定できる
  • 未入力時のアクションなど…

フォーム部品を選択するセレクター

:checked
:selected
  • $(“:selected”).~
  • セレクトボックスで選択している要素だけを選択
  • セレクトボックスを選ぶと、特定のinput要素を使用できなくするなど…