將 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();
創作者介紹
創作者 大笨鳥 的頭像
大笨鳥

大笨鳥的私房菜

大笨鳥 發表在 痞客邦 留言(0) 人氣()