• 締切済み

イベント発生順序

いつもお世話になっています。 JavaScriptの発生順序を制御する方法はありますでしょうか？ 例えば、あるテキストボックスがあって、 Ａ１→Ｂ２とフォーカスが移るときのイベントですが、 Ｂ２.onFocus→Ａ２.onBlurの順番でイベントが発生していますが、これを Ａ２.onBlur→Ｂ２.onFocusとしたいです。 IE限定でいいので、よろしくお願いします。

noname#19197
noname#19197

みんなの回答

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.5

#4>text1,text2の両方に値が入ってる場合、text1→text2にフォーカスが移った場合に、カーソルが消えてしまいます。 #4>これは、先の質問のようにtext2のフォーカスイベントが、text1のフォーカスアウトのイベント前に処理されるためだと思います。 カーソルが消える状況というのは、イベントの処理順というより、ＴＡＢ移動した時の画面の更新タイミングに依るようです。（クリックで移動した場合は、カーソルは消えませんでした、また、setTimeoutによってイベント終了後に変更するようにしてもタブ移動の場合カーソルがでないため） というわけで、非常にブサイクなやり方ですが、以上の状況をなんとかするためにタブ移動をscript で実行するサンプルを書いてみました。 text1 からフォーカスが無くなったら、text2に(#4で示されたような)値を設定します。 ---------------------------------------------------------------- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=SHIFT_JIS"> <title>sample</title> <script type="text/javascript"><!-- var t_id; function func1(){ clearTimeout(t_id); form1.text2.focus(); form1.text2.value = form1.text1.value + '0000'; } function tabEmu(){ if(event.keyCode==9){ form1.text2.focus(); event.returnValue=false; return false; } } //--> </script> </head> <body> <form name="form1"> <input type="text" name="text1" value="9999" onkeydown="tabEmu()" onblur="t_id=setTimeout('func1()', 250);"> <input type="text" name="text2" value="1000"> </form> </body> </html>

noname#19197
質問者

お礼

ありがとうございます。 これでこの問題自体は解決できそうですが、textboxが増えた場合の制御とかが難しそうですね。 議題が変わってきましたので、一旦クローズさせて頂きます。 長い間お付き合いして頂き、ありがとうございました。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.4

#3補足＞検証は、あくまでもイベントの確認をするためのものです。 間違っていたらご指摘下さい。 私の答え、 onFocusin を使用することで、イベントの発生順を Ａ１.onBlur→Ｂ２.onFocus にできる。 ・＃１onFocusin に変更してみたが「テキストボックスに値が入ってる場合はＢ２.onFocus→Ａ２.onBlur」のようにイベントが起こるのでonFocusinは使えない。 それに対する私の答え、値が入っていても、(onFocusinで）大丈夫。 ・質問者が検証されているＨＴＭＬ 私の答え、onFocusin が使われていない。 ＃３＞フォーカスを受けるイベントを取りたいのではなく、次のフォーカスに移る前の処理をしたいのです。 focus 側で処理をするなんて初めから言っておりません。 つまり、「Ａ２.onBlur→Ｂ２.onFocus」の順番でイベントが起こってA2.onBlur で処理をすればいいのですよね？ 騙されたと思って、 ＃２の検証ＨＴＭＬでonFocus を onFocusin に（両方（(B2ですけど)多分ソコを勘違いされているのだと思うのですが））変更して検証してみていただけませんか？

noname#19197
質問者

補足

いつも回答ありがとうございます。 根本的なことを端折ってしまって、本来の問題から外れてきました。 何が問題なのか具体的にあげますと、 以下のJavaScriptで問題になってます。 <input type="text" name="text1" onBlur="text2.value = this.value + '0000';" /> <input type="text" name="text2" /> text1,text2の両方に値が入ってる場合、text1→text2にフォーカスが移った場合に、カーソルが消えてしまいます。 これは、先の質問のようにtext2のフォーカスイベントが、text1のフォーカスアウトのイベント前に処理されるためだと思います。 text2に、onFocusinイベントを挿入してもダメでした。 よろしくお願い致します。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.3

#2補足> onFocusin になってないみたいだけど・

noname#19197
質問者

補足

#1の補足でも申しましたが、 フォーカスを受けるイベントを取りたいのではなく、次のフォーカスに移る前の処理をしたいのです。 検証は、あくまでもイベントの確認をするためのものです。 説明が足らず申し訳ありません。

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.2

#1>テキストボックスに値が入ってる場合はＢ２.onFocus→Ａ２.onBlur となるみたいです。 ウチで試してみたところでは、値が入っていても Ａ１.onBlur→Ｂ２.onFocus になりますが・・

noname#19197
質問者

補足

ありがとうございます。 検証したHTMLです。 <HTML><HEAD></HEAD><BODY> <input type="text" name="text1" onFocus="alert('text1.onFocus');" onBlur="alert('text1.onBlur');" /> <input type="text" name="text2" onFocus="alert('text2.onFocus');" onBlur="alert('text2.onBlur');" /> </BODY> </HTML> text1、text2の両方に値が入っている場合に text2.onFucus→text1.onBlurとなります。 環境は、WinXP SP2 IE6.0です

  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

タブでフォーカス移動した時は Ａ１.onBlur→Ｂ２.onFocus になって Ｂ２クリックで移動した時は Ｂ２.onFocus→Ａ２.onBlur になるようです。 Ｂ２.onFocus の代わりに onFocusin を使ってみてください。

noname#19197
質問者

補足

今、色々調査している途中なんですが単純にそういうわけではないみたいです。 テキストボックスに値が入ってない場合は Ａ１.onBlur→Ｂ２.onFocus となりますが、 テキストボックスに値が入ってる場合は Ｂ２.onFocus→Ａ２.onBlur となるみたいです。 やりたいことは、フォーカスが移る前にonBlurの処理をしたいので、onFocusinは使えません。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • onBlurとonFocusの処理順序について

    テキストボックスが２つあり(ＡとＢとします)、 ＡにはonBlur時に、ＢにはonFocus時に処理を行うようにしています(実行処理はそれぞれ別物)。 この状態でＡからＢにカーソルを移すと、 ＢのonFocus処理を行い、その後ＡのonBlur処理を行ってしまいます。 ＡのonBlur→ＢのonFocusという順番で処理をしたいのですが、これは可能なのでしょうか？ また、イベントハンドラの発生順序(処理順序？)には決まりがあるのでしょうか？

  • フォーカス移動抑止について

    お世話になっております。 ブラウザの画面項目（テキストボックス等）間でフォーカスを移動する場合、移動元でonblur、移動先でonfocusが発生しますが、移動元のonblurで、特定の条件の場合だけフォーカス移動を抑止し、移動先onfocusを発生させないようにしたいのですが、何か方法はないでしょうか？ 【環境】 ・IE6 【現在うまくいっていない方法】 現在、フォーカス移動を抑止するため、移動元のonblur内の処理で、「event.srcElement.focus()」を実行してますが、移動先のonfocus()も走ってしまう。（２回フォーカス移動することで元の画面項目にフォーカスが戻る） 【補足】 ・問題になっているのは、画面項目のonblur、onfocusで入力値のチェックや他画面項目との連動、色変更、エラーメッセージ表示等を行っておりonblurやonfocusが何度も走ってしまうと想定外の動きをしてしまいます。（場合によってはフォーカス移動の無限ループ） ・グローバル変数を屈指すれば想定外の動きをしないようにすることはできるかと思いますが、それ以外の方法で制御したい。 【現在うまくいっていない方法の動作確認用のとりあえず作ったサンプルプログラム】 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title>フォーカス遷移抑止検証</title> <script type="text/javascript"> var iEventCount = 0; function onElemBlur() { if (++iEventCount > 10) return true;// 無限ループ抑止用 debug("blur : " + event.srcElement.value); event.srcElement.focus(); } function onElemFocus() { if (++iEventCount > 10) return true;// 無限ループ抑止用 debug("focus : " + event.srcElement.value); } function debug(msg) { var obElem = document.getElementById("debugmsg"); obElem.innerHTML += msg + "<br/>"; } </script> </head> <body> <input type="text" value="hoge1" onblur="onElemBlur()" onfocus="onElemFocus()" /> <br/> <input type="text" value="hoge2" onblur="onElemBlur()" onfocus="onElemFocus()" /> <br/> <br/> <br/> <span id="debugmsg" rows="10" cols="50" ></span> <br/> </body> </html> 長々と申し訳ありません。 よろしくお願いいたします。

  • TextChangeイベントが発生しない

    ASP.NETで開発を行っています。 クライアント側の処理はJavaScript、サーバー側の処理は VB.NETを使っています。 サーバー側であるテキストボックスに対してT extChangeイベントを発生させたいのですが、 クライアント側の処理で値を入力したときは、 イベントが発生しません。 サーバー側で値を変更したときは発生します。 具体的な手順は以下のとおりです。 Cookieから取得した値をテキストボックスにセット ↓ この時点でTextChangeイベントを発生させたいが、何も起こらない。 ↓ サーバー側の処理でそのテキストボックスの値を変更する。 ↓ この時点でTextChangeイベントが発生。 また画面上で直接値を入力したときはイベントが発生します。 クライアント側の処理でテキストボックスに入力した場合は、 サーバー側のイベントは発生しないのでしょうか。 この処理の中で値が入力された時点でイベントを発生させる にはどうしたらいいのでしょうか？

  • [Javascript]テキストボックスにフォーカスが来たら色を変えたい。

    こんばんわ。 テキストボックスなどにフォーカスが当たったら、そのテキストボックスの背景色を変えたいのです。 onForcus と style を組み合わせてイロイロしましたがダメでした・・・。 onfocus=""とonblur=""で動きを認識して・・・ style="background-color : aqua;" や style="background-color : white;" で背景色を変えたいのですが・・・。 宜しくご伝授くださいませ。

  • アプリの終了とイベントの発生順序 C#

    C#2005でアプリの終了とイベントの発生順序について悩んでいます。 System.Environment.Exit(0); を使うと、 FormClosingイベントが発生せず、直ちに終了するのですが これを回避できる方法はありますか？ 話は戻りますが、アプリの確実な終了はEndよりSystem.Environment.Exit(0);の方が まともだと思って使いましたが、それであっているのでしょうか？ 以前、Application.Exit();で常駐するソフトで使いましたが終了しなかったので、 System.Environment.Exit(0);を使いました。 また、皆さんはイベントの発生順番を調べるのにどのようにしていますか？ 良いサイトがあれば教えてください。

  • テキストボックスの値変更時のイベント

    フォーム上のテキストボックスに、前の画面で入力したデフォルト値が表示されている状態で、テキストボックスの値を変更したらJavaScriptの関数でチェックさせたいと考えているのですがうまくいきません。 onChangeイベントは値を変更（例えば削除するなど）して、Enterキーを押すなりフォーカスを移すなりしないとイベントが発生しないので、変更されたら即座にチェックということができません 何かうまい方法はないでしょうか？

  • イベント発生について

    お世話になります。 ．ＮＥＴ　Ｃ＃で開発をしております初心者です。 テキストボックスに数字を入力したら、その値をメッセージボックスで ユーザーに確認を促したいのですが、そのイベント発生タイミングを どうしたらいいのか考えています。 現在は下記の様にしています。 まず、TextChangeイベントで、変数に代入してから、Leaveイベントでメッセージボックス を表示させています。 本当は、Leaveイベントでなく、その場でメッセージボックスを表示させたいのですが、 でも、TextChangeイベントだけでは、例えば二桁以上の数字を入力しようとしていた場合、 一桁数字を打ち込む度に、TextChangeイベントが発生してしまい、その度にメッセージボックスが 表示されてしまうので、仕方なくLeaveイベントも使っています。 何か良い方法ってありますでしょうか。 どなたかご親切な方、ご教授頂きたく宜しくお願い致します。 　　　　　　　　　　　　　　　　　　　　　　　　　　記 private void textBox1_TextChanged(object sender,EventArgs e) { if(textBox1.Text != "-") { if(textBox1.Text != "") { suuryou = int.Parse(textBox1.Text); 　 } } } private void textBox1_Leave(object sender,EventArgs e) { if(textBox1.Text != "") { MessageBox.Show(suuryou,"", MessageBoxButtons.OK, MessageBoxIcon.Information); } }

  • クリックイベントは実行されない

    サブフォームのテキストボックスにクリックイベントでＶＢＡを実行するようにしてるのですが クリックしても何も反応がありません。 だけど試しに同じテキストボックスに、フォーカス取得後のGotFocusイベントを[イベント プロシージャ]で選択してみましたが テキストボックスにフォーカスが触れるとイベントが実行されます。 なぜクリックイベントは実行されないのでしょうか？ サブフォームは帳票フォームです。それ関係ありますか？

  • blurイベントについて

    javascriptでblurイベントが実行するように設定していますが、 テキストボックスなどにフォーカスが当たった状態でsubmitボタンをクリックすると、 blurイベントが実行され、submitボタンがクリックできなくなります。 ※もう一度、クリックするとクリックできます。 一回目でクリックできるように回避する方法などございますでしょうか？

  • テキストボックスでリターン(Enter)ボタンを押下し、イベントを発生させる

    ただ今JavaScriptを勉強しているものです。 テキストボックスでリターン(Enter)ボタンを押下し、イベントを発生させたいのですが、どういったコードで実現可能でしょうか？ どなたか教えてください。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する