|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<h2>フォーム</h2> <form id="form01"> <input type="text" name="name"> </form> <script> $(function(){ $("#form01 [name='name']").blur(function(){ $(this).after('<p>aaaaa</p>'); }); }); </script> |
ーカスアウト時に文字を追加、これだと追加されてしまう。
なので、フォーカス時に有れば消すという処理を入れる。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<form id="form02"> <input type="text" name="name"><p></p> </form> <script> $(function(){ $("#form02 [name='name']").blur(function(){ $(this).next("p").text('aaaaa'); }); }); </script> |
これはテキスト入力の次に空のＰタグを入れている。フォーカス時に次のＰタグの内容を.textで書き換えている。
ただ、これだと次にＰタグがあるのが前提になる。そこで、次の要素がＰか確認するなど処理を入れる。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<form id="form03"> <input type="text" name="name"> </form> <script> $(function(){ $("#form03 [name='name']").blur(function(){ if(!$(this).next("p").length){ $(this).after('<p>追加されたＰタグの中身</p>'); } }); }); </script > |
(this).next(“p”).lengthで、有るか確認してなければ、afterで追加
|
1 2 3 4 5 6 7 8 9 10 |
<p id="click_re">クリックで消してみる</p> <script> $(function(){ $("#click_re").click(function(){ $("#form03 [name='name']").next("p").remove(); }); }); </script> |
