→フォームについて ※【jQuery】 その②
フォームについて ※【jQuery】 その③
◆val
入力されている値や選択されている値を取得・変更
＜例＞
$("#
mail_ad").text($("input").
val()+"に送信します。")；
mail_adのinputの
入力されているのを習得して、『に送信します。』と付け加えて変更される
＜例＞
$("#
kakunin").text($("
select").
val())；
kakuninのテキストが
selectで選択されている値に変更される。※テキストエリアでもできます。
.
val()→値を取得
.
val(””)→値が空
◆val（""）
入力された値を削除する、クリアする。
クリアボタンをつくって、そのボタンを押すとクリアされる。
※＜/form＞タグの中に＜button＞をいれるとファイルがありませんとでるので注意
＜button＞タグが飛んでしまうのは、type=""を指定していないから
”button”⇒ボタンとしてだけの機能
”submit”⇒実行ボタン
"reset”⇒リセットボタン
◆focus
フォーム部分が選択（マウスやTabで）されたのを感知して処理を実行してくれる
★
メソッドチェーンと
＄（this）をつかう
＜例＞
*html側*
＜p id="name"＞名前＜input type="text"＞＜/p＞
＄("#name input")
.val（”ここに入力”）
.css("color","#cccccc")
.
focus(function(){
$(this).val("")
.css("color","000000")
});
フォーカスされたら処理してね
※CSSを操作するときは、スタイルシートで操作されるCSSをつくっとかないと動かない。
※ドットで繋がってるのがメソッドチェーン
フォームの中に”ここに入力”という文字を薄く入れといて、
入力しようとすると消えて、さらに、入力した文字は濃くなっている
注：フォーカスされるたびに消えてしまう。のをどうにかするために…↓↓
一回のフォーカスのみにしてね【one】をつかう。1回だけ
フォーカスの部分をone();の中に入れる
【one】のかき方はこちら→
イベント発生の条件→
focus
イベント発生した時の処理→
val（””）と色変更
＄("#name input").val("ここに入力").css("color","#cccccc")
.one("
focus",
function(){$(this).val("").css("color","000000")}）;
.one("
発生条件",
function(){発生時の処理}）;
◆blur（ブラー）
フォーム部分の選択（マウスやTabで）がは外れたのを感知して処理を実行してくれる
*どんな時に使うのか？
フォーカスが外れたときの処理を変えたいとき。
⇒
フォームの入力/未入力によって処理を変えたい時は
if文をつかう。
if文について→
もし、フォーカスされても入力されなかったら、文字表示しといてね。
↓↓↓
※メソッドチェーンで↑のｊｓ（focus）につなげます。
.bluer(function（）｛
if（$(this).val()==""
){ //もしフォームが空だったら
※同じ処理なので↑のｊｓ（focus）をそのままコピペします。
}
｝)；
◆change
入力された内容を感知する（
フォーカスが外れたら感知します。）
*どんな時に使うのか？
選択が変更されたら、テキストの項目を変更したいとき。
セレクトボックスと一緒につかいます。
↓↓↓
optionタグにvalueに入れたテキストを読み込む
*ｈｔｍｌ側*
＜select＞
＜option
value="いちばん"＞いちばん＜/option＞
＜option
value="にばん"＞にばん＜/option＞
＜option
value="さんばん"＞さんばん＜/option＞
＜/select＞
＜ｐ＞＜span＞
いちばん ＜/span＞＜input・・・省略
セレクトボックスが変更されたら、セレクトボックスのvalueを＃Chanのspanにテキストかえてね
↓↓↓↓
*ｊｓ側*
＄(function（）｛
＄(”select”)
.change(function（）｛
＄(”＃chan span”).text(＄(this).val（）);
｝);
｝);
※テキストを変更するだけでなく、追加して項目を増やすこともできる。と思う
