Q&A
質問の答えでなくて申し訳ないですが、HTMLは以下のように「バッククォート３つ」で囲ってもらえると助かります。
```
<!DOCTYPE html>
<html lang="ja">
...
</html>
```
Ｑ．以下にあるケース２において、
＜＜“名前：”欄が空白時にfocusが発火するようにコードしてあるにも関わらず、
何故、“名前：”欄が空白でない時に、focusが発火して、名前入力欄の内容を消去することになるのか？
御分りになる方、御教示お願い致します。＞＞
ケース２のソース上、１４～１５行目“.focus(function(){//ブルー ～ $(this).val("") 〜”は、
１２行目“if($(this).val()==""){”の条件（空欄の時）にだけ実行されるようになっています。
ところが、欄内に”なまえ”文字を入力して、空欄でないにも関わらず、クリック後、“.focus～”が
実行されて空欄になります。
宜しくお願いいたします。
※尚、ケース１で、望む結果となるのですが、・・・！
================================================
（（（実行結果）））
ケース１＜line_14(one_focus).html＞
１）“お名前：”欄に、 "入力してください" が表示される。
２）欄内をクリックすると、空欄になる。
３）欄外をクリックすると、ポップアップ（“値なし”）が表示される。
４）ＯＫを応答後、欄内をクリックする。
５）“入力して！！！”が表示される。
６）欄内に”なまえ”文字を入力する。
７）欄外をクリックすると、ポップアップ（“値あり”）が表示される。
８）ＯＫを応答後、欄内をクリックする。
９）欄内の”なまえ”文字は、そのまま残っている。
ケース２＜line_14(focus).html＞
１）“お名前：”欄に、 "入力してください" が表示される。
２）欄内をクリックすると、空欄になる。
３）欄外をクリックすると、ポップアップ（“値なし”）が表示される。
４）ＯＫを応答後、欄内をクリックする。
５）“入力して！！！”が表示される。
６）欄内に”なまえ”文字を入力する。
７）欄外をクリックすると、ポップアップ（“値あり”）が表示される。
８）ＯＫを応答後、欄内をクリックする。
９）欄内の”なまえ”文字は、消去される。
Ａ）上記のケース１、２の差異は、
ａ）実行結果では、９）だけである。
ｂ）ソース上では、１４行目
ケース１では、”$(this).val("入力して！！！")～.one("focus",function(){//ブルー”
ケース２では、”$(this).val("入力して！！！")～.focus(function(){//ブルー”
================================================
（（（ソース）））
ケース１＜line_14(one_focus).html＞
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>line_14(one_focus)</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function(){ $("input").val("入力してください").css("color","#EDDB35").one("focus",function(){//黄色 $(this).val("").css("color","#E022CE");//赤紫 }).blur(function(){ if($(this).val()==""){ alert('値なし'); $(this).val("入力して！！！").css("color","#7460E8").one("focus",function(){//ブルー＜＝＝問題箇所。＞ $(this).val("").css("color","#45E572");//緑 }); }else{alert('値あり');} }); }); </script> </head> <body> お名前：<input type="text" value=""> </body> </html> *********************************************
ケース２＜line_14(focus).html＞
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <title>line_14(focus)</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script> $(function(){ $("input").val("入力してください").css("color","#EDDB35").one("focus",function(){//黄色 $(this).val("").css("color","#E022CE");//赤紫 }).blur(function(){ if($(this).val()==""){ alert('値なし'); $(this).val("入力して！！！").css("color","#7460E8").focus(function(){//ブルー＜＝＝問題箇所。＞ $(this).val("").css("color","#45E572");//緑 }); }else{alert('値あり');} }); }); </script> </head> <body> お名前：<input type="text" value=""> </body> </html> *********************************************
回答1件
0
ベストアンサー
ケース１では、”$(this).val("入力して！！！")～.one("focus",function(){//ブルー”
ケース２では、”$(this).val("入力して！！！")～.focus(function(){//ブルー”
まさに one('focus', ...) と focus() ( on('focus', ...) も同じ)の仕様の差が理由です。
one('focus' 関数) は、one() が呼ばれたあと一回だけfocusイベントが発生したときに関数が呼ばれます。
focus(関数)は、focus()が呼ばれたあと、何回でもfocusイベントが発生するたびに関数が呼ばれます。off() で止めることができます。
既に期待する動作は得られているようですが、
- イベントハンドラを付け外しするのはコードがややこしくなりがちなので、イベントハンドラは最初から登録しっぱなしにしておいて、対象の状態によって処理を振り分けるほうが楽かもしれません。
- 「入力してください」のような本来は値でないものを値として表示させるのはトラブルの元です。placeholder属性やrequired属性を使ってしまってよいのではないでしょうか。
質問文の手順に沿って何が起きているか書いてみました。
１）“お名前：”欄に、 "入力してください" が表示される。
２）欄内をクリックすると、focusイベントが発生し、イベントハンドラで空欄になる。
３）欄外をクリックすると、blurイベントが発生し、イベントハンドラでポップアップ（“値なし”）が表示される。
４）ＯＫを応答後、“入力して！！！”が表示される。focusイベントハンドラが登録される
５）欄内をクリックする。focusイベントが発生し、ステップ４で登録済みのイベントハンドラが空欄にする。
６）欄内に”なまえ”文字を入力する。
７）欄外をクリックすると、blurイベントが発生し登録済みのイベントハンドラでポップアップ（“値あり”）が表示される。
８）ＯＫを応答後、欄内をクリックする。focusイベントが発生し、ステップ４で登録済みのイベントハンドラでステップ9が実行される
９）欄内の”なまえ”文字は、消去される。
投稿2021/03/17 04:57
編集2021/03/18 07:19
総合スコア21679
迅速に回答して頂き、ありがとうございます。
私が知りたかったのは、”～focus(function(){//ブルー＜＝＝～”が、”if($(this).val()==""){”すなわち、空白のときに発火する条件が付いているにも関わらず、欄内に”なまえ”文字を入力した（空白でない）時に何故発火してしまうのかということです。
すみません。ややこしいのですが！！！
質問文のステップ5でいったん空白の条件を満たして .focus(...) でイベントハンドラを登録すると、登録解除しない限りはフォーカスする度に登録したイベントハンドラが呼ばれます。空白の条件は「イベントハンドラを登録するかどうか」の条件であって、登録後は空白の条件は「イベントハンドラが呼ばれるかどうか」とは関係ありません。
丁寧に説明して頂き、感謝しております。登録するという意味が分かった様な気分なのですが、イベントハンドラーに魂をいれるとでも解釈すればよいのでしょうか？実はこのコーディングソースは、jqueryの参考書に例文として載っていたもので、私にとって見たことがないタイプで悩みました。
最初に回答いただいた”～イベントハンドラは最初から登録しっぱなしにしておいて、〜"とは、ｉｆ文などのある条件付きのネスト中のイベントハンドラは、止めたほうが良いということですね！
いろいろとありがとうございました。
たいへん厚かましい質問のですが、「イベントハンドラを登録する」とは、登録する場所は、何処で？何か特別な名前？があるのでしょうか？よろしくお願い申し上げます。
横から失礼します。「イベントハンドラを登録する」というより、ブラウザにイベントを記憶させておくという言い方のほうがしっくりくるかと思います。
おお、コメント見逃してました。
「イベントハンドラを登録する」とは、jQuery の one() focus() on() click() などを関数を渡して呼び出すことです。渡した関数のことをイベントハンドラやイベントリスナと呼びます。登録先はブラウザだと思っておけばよいです。イベントが起きたときに、ブラウザが登録された関数を呼びます。
いろいろありがとうございました。ご回答のお陰で、現象を裏付ける正しい理論を得られて満足しております。正しく理解しておかないと応用も効かず、後日、混乱する為、何度も質問することになりました。
また、よろしくお願いいたします。
あなたの回答
tips
プレビュー
