- 締切済み
イベント発生順序
いつもお世話になっています。 JavaScriptの発生順序を制御する方法はありますでしょうか？ 例えば、あるテキストボックスがあって、 Ａ１→Ｂ２とフォーカスが移るときのイベントですが、 Ｂ２.onFocus→Ａ２.onBlurの順番でイベントが発生していますが、これを Ａ２.onBlur→Ｂ２.onFocusとしたいです。 IE限定でいいので、よろしくお願いします。
- JavaScript
- 回答数5
- ありがとう数1
- みんなの回答 （5）
- 専門家の回答
みんなの回答
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#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>
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#3補足＞検証は、あくまでもイベントの確認をするためのものです。 間違っていたらご指摘下さい。 私の答え、 onFocusin を使用することで、イベントの発生順を Ａ１.onBlur→Ｂ２.onFocus にできる。 ・＃１onFocusin に変更してみたが「テキストボックスに値が入ってる場合はＢ２.onFocus→Ａ２.onBlur」のようにイベントが起こるのでonFocusinは使えない。 それに対する私の答え、値が入っていても、(onFocusinで）大丈夫。 ・質問者が検証されているＨＴＭＬ 私の答え、onFocusin が使われていない。 ＃３＞フォーカスを受けるイベントを取りたいのではなく、次のフォーカスに移る前の処理をしたいのです。 focus 側で処理をするなんて初めから言っておりません。 つまり、「Ａ２.onBlur→Ｂ２.onFocus」の順番でイベントが起こってA2.onBlur で処理をすればいいのですよね？ 騙されたと思って、 ＃２の検証ＨＴＭＬでonFocus を onFocusin に（両方（(B2ですけど)多分ソコを勘違いされているのだと思うのですが））変更して検証してみていただけませんか？
補足
いつも回答ありがとうございます。 根本的なことを端折ってしまって、本来の問題から外れてきました。 何が問題なのか具体的にあげますと、 以下の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)
#2補足> onFocusin になってないみたいだけど・
補足
#1の補足でも申しましたが、 フォーカスを受けるイベントを取りたいのではなく、次のフォーカスに移る前の処理をしたいのです。 検証は、あくまでもイベントの確認をするためのものです。 説明が足らず申し訳ありません。
- BLUEPIXY
- ベストアンサー率50% (3003/5914)
#1>テキストボックスに値が入ってる場合はＢ２.onFocus→Ａ２.onBlur となるみたいです。 ウチで試してみたところでは、値が入っていても Ａ１.onBlur→Ｂ２.onFocus になりますが・・
補足
ありがとうございます。 検証した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)
タブでフォーカス移動した時は Ａ１.onBlur→Ｂ２.onFocus になって Ｂ２クリックで移動した時は Ｂ２.onFocus→Ａ２.onBlur になるようです。 Ｂ２.onFocus の代わりに onFocusin を使ってみてください。
補足
今、色々調査している途中なんですが単純にそういうわけではないみたいです。 テキストボックスに値が入ってない場合は Ａ１.onBlur→Ｂ２.onFocus となりますが、 テキストボックスに値が入ってる場合は Ｂ２.onFocus→Ａ２.onBlur となるみたいです。 やりたいことは、フォーカスが移る前にonBlurの処理をしたいので、onFocusinは使えません。
お礼
ありがとうございます。 これでこの問題自体は解決できそうですが、textboxが増えた場合の制御とかが難しそうですね。 議題が変わってきましたので、一旦クローズさせて頂きます。 長い間お付き合いして頂き、ありがとうございました。