0

ちょっと恥ずかしいのですが教えてください。初心者にありがちな質問かも知れません。

INPUT TYPE=TEXTの要素:「A」について、changeイベントで動作させるJavaScript(JQuery)を
コーディング済みです。
また同ページにはBUTTON要素:「B」も配置されていて、こちらのclickイベントの動作が達成されるようにもコーディングを済ませています。

「A」のテキスト枠について、内容が変わったと判断されるのは
フォーカスが外れた段階=別の要素に触れたとき??と認識していますが

①「A」のテキスト枠内容変更
②「B」のボタンをクリック

と立て続けに動作が実施されると、①発火タイミングが②の動作時、という感じになってしまう気がします。

なぜ、こう思ったかというと、
開発中のWebページは、「B」のクリックイベント用のコーディングが、「B」を2回押さない限り動作してくれない、ように見てとれる為です!!

====質問====

①②の順序で、Webページが利用されても、
「A」のchengeイベントの発火を、②の動作以外で対応する方法はあるのでしょうか?

...皆さんどういう対応方法で、このありがちな問題を克服するのでしょうか?
もう一つ画面利用者の動作を増やす以外ない、とか言わないですよねぇ....(そうなると絶望的)

(今回Webページ初の開発で、click・change・blurのイベント察知しか現在まで把握しておりません)

5
  • 「AのchangeイベントがBのクリックイベント時に発生する気がする」ことと「Bを2回押さないとイベントハンドラーが実行されない」ことのつながりがよく分からないです。
    – sigh
    Commented 2017年11月13日 4:44
  • Aのテキストボックスの入力後、すぐさまBのボタンをクリックする際の話で Aのchangeイベントの発火が、Bのクリック操作で行われているようで Bの一度目のクリックでは、Bのクリックイベントが動作していないようにみえる。 その結果、Bを2度クリックしなければ、Bのクリックイベントが発火しないように 見て取れる....理解に苦しむような文面を掲載してしまい申し訳ありません。
    – saya24
    Commented 2017年11月13日 5:53
  • 同様のプログラムを作ってみましたが、問題が再現できません(windows 10, chrome 64)。
    – sigh
    Commented 2017年11月13日 6:29
  • karamarimo様 分かりやすい説明・サンプルの提示をありがとうございます。例から見るにBが2回クリックされたのなら、2回動作するに違いない、ということですね。自分でも何を聞きたいのか分からなくなってきてしまいました。ちょっと頭を整理してみます。すみません...
    – saya24
    Commented 2017年11月13日 9:25
  • Aのchangeイベントの中で ・BのボタンをすぐさまJQueryでshowさせていたり (⇔画面上の入力内容が変わったので、登録ボタンを隠し、確認ボタンを現して内容確認を促す) ・BのボタンをJQueryでdisableにしていた (⇔画面上の入力内容が変わったので、Ajaxが戻るまでの間、非活性にしていた) ことが原因で、Bのクリック一回目が イベントとして認識されていない可能性が大きいようです。 この点を考慮したAのchangeイベントの記述にしたら2度押しの必要性がなくなりました...。
    – saya24
    Commented 2017年11月14日 11:06

1 件の回答 1

0

私の場合はテキストフォームのchangeイベントはフォーカスは使わず、基本的にはkeyupを利用してキーの入力を察知します。
keyupはキーボードの入力を検知してイベントが発火します。
https://qiita.com/maruyam-a/items/cf0168f91d934b449a07

ただし日本語の入力の場合は、変換処理等が発生するので
keyupで取得したデータを元に日本語入力かどうかのチェックをする必要がありますので
その実装に手間がかかるかもしれません
https://garafu.blogspot.jp/2015/09/jquery-complete.html

1
  • keitaro_so様 ご見解をありがとうございます、引き続き皆様のご見解をお待ちして、常識的な解決策を捉えたいと思います。
    – saya24
    Commented 2017年11月13日 1:21

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。