juaryについて

2014/05/25 16:27

このQ&Aのポイント

juaryについての質問に対する解決方法についてまとめます。
テキストの横に必要記入という文字を表示する方法や、文字を消す方法について解説します。
チェックボックスのすべての選択を取り消すプログラムについて説明します。

yonbakukan
お礼率7% (11/148)

JavaScript
回答数3
ありがとう数1

みんなの回答 （3）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

DoubtOwl
ベストアンサー率50% (63/124)

2014/05/29 16:11 回答No.3

#2での動作確認はとれているのですが・・・ご提示されたソースなら下記のようにしてみてください。同じくKeyupイベントで表示・非表示を切り替えています。 <script>  </script> </head> <body> <form action="#" method="POST"> <p>氏名<input type="text" size="20px"></p> <em></em> <p>住所<input type="text" size="20px"></p> <em></em> <p>電話番号<input type="text" size="20px"></p> <em></em> </form> </body> またはこうすると解りやすいでしょうか。こちらだとフォーカスが外れたとき（背景色を赤にするのと同じタイミング）に emの表示・非表示を変更しています。 $(function(){ $(":input").css("backgroundColor","#ff3300") .click("focus",function(){ $(this).css("backgroundColor","#fff") }) .blur(function(){ if($(this).val()==""){ $(this).css("backgroundColor","#ff3300"); $(this).parent().next().css("display","inline"); } else { $(this).parent().next().css("display","none"); } }) }); $(function(){ if($(":input").val()==""){ $("em").text("記入漏れ") } }); -->

質問者

お礼 2014/05/31 18:40

今日実行に移せてページが完成しつつあります。大変お世話になりました。またお願いします

質問者

補足 2014/05/30 13:04

ばっちりでした＾＾すごい。素晴らしい。恥を忍んでお願いします。解説をお願いしたいのです。 $(this).parent().next().css("display","inline") } else { $(this).parent().next().css("display","none"); } の部分です。 keyupもじつはよく解ってないのですが、 next()は解ります。よくアコーディオンに使うのに僕は使います。クリックする事で次の要素が開くという感じです。 parentは始めでなのでやはり解りません。最後のdisplayはこれはタブを作るのと一緒ではと思います。クリックして背景が入れ替わるのと一緒だと思います。ただinlineであってblockでないのは何故なんだろうと思いました。すいません。技術を詰めたいのです。

その他の回答 (2)

DoubtOwl
ベストアンサー率50% (63/124)

2014/05/28 11:43 回答No.2

失礼しました。入力テキストボックスに「必須記入」と書かれているタイプだと勘違いしておりました。下記のように変更してみてください。 keyupイベントで入力を判定し、 id = s5 の次の要素の表示・非表示を切り替えています。 $(function(){ $("#s5").css("backgroundColor","#ccc") .click("focus",function(){ $(this).css("backgroundColor","#fff") }).blur(function(){ if($(this).val()==""){ $(this).css("backgroundColor","#ccc") } }).keyup(function(){ if($(this).val()==""){ $(this).next().css("display","inline") } else { $(this).next().css("display","none"); } }); });

質問者

補足 2014/05/29 15:20

アドバイス頂きましたが上手くいかなかったです。自分にはまだ難しいのかもしれませんそこで $(function(){ $(":input").css("backgroundColor","#ff3300") .click("focus",function(){ $(this).css("backgroundColor","#fff") }).blur(function(){ if($(this).val()==""){ $(this).css("backgroundColor","#ff3300") } }); }); $(function(){ if($(":input").val()==""){ $("em").text("記入漏れ") } }); --> </script> </head> <body> <form action="#" method="POST"> <p>氏名<input type="text" size="20px"></p> <em></em> <p>住所<input type="text" size="20px"></p> <em></em> <p>電話番号<input type="text" size="20px"></p> <em></em> </form> 考えた末、ifを使って空白のときにem内に文字を出すというプログラムを考えましたが上手くいきませんでした。構想はいいとは思いますが、字が消えないわけです。今回のアドバイスですと、消すというより見えなくするというのが適切だと思います。これを上手く使えないものかと考察してますが如何でしょうか？独学だとどうしても未熟な知識になってしまいます。

DoubtOwl
ベストアンサー率50% (63/124)

2014/05/26 13:27 回答No.1

＞テキストの横に必要記入という文字は出せるのですが＞記入と同時に文字を消す方法はありませんか？幾つか方法はありますが、下記などが良いかと・onfocusイベントで必要記入の項目で文字列が「必要記入」と一致していた場合は文字をクリア、　onblurイベントで必要記入の項目が空だった場合は必要記入と入力＞チェックボックスにはすべてチェックは入りますが、＞こんどこれを取り消すプログラムを入れると＞うまくいきません。以下の様にしましょう。 $(":select").attr("checked", false); retrun false; ＞return falseを使う事でデーターをとめる？役割を果たしていると思います。問題ないかと思います。

質問者

補足 2014/05/27 14:36

やったのですがうまくいきませんでした。 afterを使っているんですが、afterそのものは一回出すと仮に最初の初期値？の段階は何も入ってないのだからval==""になるわけで $(function(){ $("#s1").after("必須記入").css("backgroundColor","#00ffff") }); とは初期の段階で入っている事になります。しかもafterは一回だすと消す方法がないのでは？そうするとappendかprependとかとなりますが、これはリストタグに使うのではと思います。色々考えて、入力規則とか関わるのか？と色々考察しているんですが、簡単な方法はないもんでしょうか？よく見るページはあれは特殊なプラグインかなんかを使っているのでしょうか？ placeholderでもいいんですが、それだと自分を成長できないような気がします。

juaryについて

juaryについて