大笨鳥的私房菜

將 form 表單放在 div tag 內，然後設定 div 座標讓 div 漂浮在畫面上，做成類似 AP 程式中 Dialog 的效果是現在網頁常用的手段。但此種方式在 firefox 上有時卻會出現中輸入欄位(即 Text、TextArea)內無法顯示游標的怪事。請注意是「有時候」，也就是說有些狀況下會發生，甚至相同版本的 firefox 在不同台電腦下執行，有的可以正常顯示，有的不能正常顯示。
 
使用股狗大神查出的資料明指出這個是 firefox 的 bug，雖然有不少網站介紹了解決方法，但是照做卻沒有效果，http://cctg.blogspot.com/2008/04/cursor-bug-in-ff.html 文章甚至更直指出此 bug 沒有方法可解。
 
但在 kyle 找到的這篇文章中(http://blog.360.yahoo.com/blog-sOW1QOA9crUyOdXFxOeK4xc-?cq=1&p=113)中提供了一個可行的解決之道。

文章中說道：「在載入完，將 div 的 overflow 改變一下。如從 overflow:auto 改成 overflow:hidden 或任何都可以在彈出層應用裏，每次彈出時都要改變一下」。
 
使用 firebug 改變一下 div 的 overflow 屬性後發現這個方法是可行的，但是問題在於文章中那一句「載入完」的時機點要如何掌握？另外就是笨鳥使用 YUI 的 Dialog 元件，而且執行的步驟是先跳出第一個 dialog，等按下第一個 dialog 上的按鈕後，先跳出第二個 dialog (這個 dialog 上有輸入欄框)，然後關閉第一個 dialog，整體結構上又更加的複雜，所以整個搞起來花了不少時間。
 
一開始我在第二個 dialog 執行 show() 指令之後就把第二個 dialog (也是一個 div) 的 overflow 屬性設成 auto，但是沒有用，於是我用 setTimeout() 在 show() 指令執行之後的 0.5 秒才執行設定 overflow 屬性的動作，結果成功！但是好景不常，在第二次開啟 dialog 時輸入框的游標又無法出現，一開始我以為要改變每一次 overflow 的值，比方說第一次開啟設 auto，第二次開啟設 hidden，但是完全沒效，而且我還發現當 overflow 設成 hidden 時輸入框游標是不會出現的。最後唯一的可能性就是設定 overflow 屬性的時間點，後來我發現當第一個 dialog 還未完全消失時就設定第二個 dialog 的 overflow 屬性的話一定會失敗，於是我便在第一個 dialog 關閉之後才去改變第二個 dialog 的 overflow 值，但是相同的問題又來了，也就是第一次開啟時是ok 的，但第二次開啟就失敗了，於是我再度把問題指向原文中「將 div 的 overflow 改變一下」這句話。
 
由於整個流程是先開啟第二個 dialog 再關閉第一個 dialog，於是我在開啟第二個 dialog 之後先將第二個 dialog 的 overflow 屬性設成 hidden，然後在關閉第一個 dialog 之後再把第二個 dialog 的 overflow 屬性設成 auto，如此總算大功告成。

程式片段如下：
第一個 dialog：
    ...(省略)
    var dialog = new YAHOO.widget.Dialog("msgDetailLightBox", config);
    ...(省略)
    showReplayDialog(data);
    YAHOO.util.Event.on("replayBtn", "click", function(e){
        ...(省略)
        showReplayDialog(data); // 開啟第二個 dialog
        if (YAHOO.env.ua.gecko > 0) { // 判斷是不是 firefox
            // 在第一個 dialog 關閉後 0.3 秒後將第二個 dialog 的 overflow 屬性設成 auto
            dialog.hideEvent.subscribe(
                function() {
                    setTimeout(
                        'document.getElementById("replayLightBox").style.overflow = "auto";'
                        , 300)
                });
        }
        dialog.cancel(); // 關閉第一個 dialog
    });
 
 
第二個 dialog：
    ...(省略)
    var dialog = new YAHOO.widget.Dialog("replayLightBox", config);
    if (YAHOO.env.ua.gecko > 0) { // 判斷是不是 firefox
        // 在第二個 dialog 開啟之後，將 overflow 屬性設成 hidden
        dialog.showEvent.subscribe(
            function() {
                document.getElementById("replayLightBox").style.overflow = "hidden";
            });
    }
    // 開啟第二個 dialog
    dialog.show();