May 29, 2010

在ThickBox開啟的iframe內設定物件focus的方法

最近專案剛好有個需求,要在彈跳視窗開啟後使用者可以藉由上下鍵或空白鍵去控制開啟後視窗的scrollbar藉以瀏覽頁面。彈跳視窗是使用ThickBox來實作,但ThickBox開啟後focus是直接在ThickBox上,而不是 ThickBox 裡的iframe。

研究了一下ThickBox的source code,發現ThickBox會呼叫函式tb_showIframe()來載入iframe。
所以可以在tb_showIframe()裡加入
 $("#TB_iframeContent").focus();
 $("#TB_iframeContent").contents().find("body").focus();

這樣ThickBox 開啟時focus馬上就可以落在iframe內的物件了。

經測試,$("#TB_iframeContent").focus();必須加入tb_showIframe(),在Firefox(v 3.6.3)Chrome(v 5.0.375.55)才可正常執行;若不加$("#TB_iframeContent").focus();僅可在IE(v 8)正常執行。

備註
以上提及的瀏覽器版本皆為小弟所使用的瀏覽器版本

No comments: