ど素人から毛を生やす。<延>

onblurからのalertで再focusしたらバグる問題

Web > javascript 2017年6月6日(最終更新:5年前)

2017年6月6日に作成されたページです。
情報が古かったり、僕が今以上のど素人だった頃の記事だったりする可能性があります。

どもです。
まこと久々のjs関係の更新です。

テキストボックスをonblurで入力チェック、
望んだものでなければalert(もしくはconfirm)を呼び、再びfocusで入力し直させる。

一般サイトだと時代遅れのブツではありますが、
裏側ならまだ現役のalert()。
こういったことは、やりたくなることがあると思います。

が、


alert("警告メッセージ");
元のテキストボックス.focus();

他の動作であれば正常に動くのですが、focusに限ってはこれバグるようです。

しかも、ブラウザによってバグの内容が異なり、
firefoxならフォーカスが移動してくれない程度で済むのですが、
chromeだと閉じても閉じても延々とalertが発動し続けるという悪夢が。

で、どうしてこんな現象が起きるのか。

alert()はフォーカスの操作を行うことまでは確定。alert()を閉じる動作が非同期なのではないでしょうか。

★alert()を閉じる際のフォーカスをアラートのウィンドウから外す
★テキストボックスにフォーカスをつける
が、同時に実行される。
結果、テキストボックスにフォーカス⇒フォーカスを外される⇒onblur()が着火。無限ループ。

アカン。(-"-)

しかし、フォーカスの処理が同時発生するのがバグの元なら、
フォーカスの処理を同時に行わせなければいい。

ということで、対処法はこちら。


alert("警告メッセージ");
setTimeout(function(){ 
	元のテキストボックス.focus(); 
	元のテキストボックス.select(); 
}, 1); 

setTimeoutでミリ秒ずらし。
これでおkです。

alert()はブラウザ差異がすっごいから、なるべく使いたくないなぁ…。


参考サイト:SE奮闘記 とあるシステムエンジニアのメモ帳

この記事は役に立ちましたか?
  • _(:3」∠)_ 面白かった (1)
  • (・∀・) 参考になった (3)
  • (`・ω・´) 役に立った (21)