重要なお知らせ

「教えて! goo」は2025年9月17日(水)をもちまして、サービスを終了いたします。詳細はこちら＞

電子書籍の厳選無料作品が豊富！

イベント発生順序

解決済

  • 質問者：noname#19197
  • 質問日時：
  • 回答数：5件

いつもお世話になっています。

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

IE限定でいいので、よろしくお願いします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (5件)

No.5ベストアンサー

  • 回答者： BLUEPIXY
  • 回答日時：

#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>
    • good
    • 0
    • 件
通報する
この回答へのお礼

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

通報する
お礼日時：2006/08/14 13:39

No.4

  • 回答者： BLUEPIXY
  • 回答日時：

#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イベントを挿入してもダメでした。
よろしくお願い致します。

補足日時：2006/08/12 17:14
通報する
    • good
    • 1
    • 件
通報する

No.3

  • 回答者： BLUEPIXY
  • 回答日時：

#2補足>


onFocusin になってないみたいだけど・

この回答への補足

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

補足日時：2006/08/11 14:50
通報する
    • good
    • 0
    • 件
通報する

No.2

  • 回答者： BLUEPIXY
  • 回答日時：

#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です

補足日時：2006/08/10 18:20
通報する
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： BLUEPIXY
  • 回答日時：

タブでフォーカス移動した時は


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

この回答への補足

今、色々調査している途中なんですが単純にそういうわけではないみたいです。

テキストボックスに値が入ってない場合は
Ａ１.onBlur→Ｂ２.onFocus となりますが、

テキストボックスに値が入ってる場合は
Ｂ２.onFocus→Ａ２.onBlur
となるみたいです。

やりたいことは、フォーカスが移る前にonBlurの処理をしたいので、onFocusinは使えません。

補足日時：2006/08/10 15:32
通報する
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報