jquery 插件 thickbox窗口第一个控件获得焦点

最新推荐文章于 2021-10-05 22:35:33 发布

转载最新推荐文章于 2021-10-05 22:35:33 发布 · 1.1k 阅读

文章标签：

#jquery #iframe #firefox #chrome #login #class

本文介绍了两种在Thickbox弹窗中设置焦点的方法：一是使用setTimeout延迟执行focus方法；二是修改Thickbox.js文件，在展示窗口后自动将焦点设置到指定元素。此外，还提供了一种使Thickbox中的iframe获得焦点的解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

为了方便用户的输入,我们一般默认页面载入后焦点设置在第一个输入的控件上,使用thickbox,弹出后的窗口怎么设置焦点呢?
原来是想说在新的页面上直接设置:$("#id").focus();的,但发现,这个在页面截入前就执行了,查找了一下http://codylindley.com/thickboxforum
的论坛,发现这种情况有两种方法可以解决:

1,还是老方法,只是延迟了时间执行焦点的获取:
setTimeout("$('#username').focus();",100);

2,比较完美的方法,但得修改thickbox.js文件.
在原thickbox.js 文件中从219到239行内的三个判断语句中的:$("#TB_window").css({display:"block"});后增加一句:
$('#TB_window .grabfocus:first').focus();//新增加的第一个获得焦点

接下来在页面中需要获得焦点的控件的class 加上:grabfocus 这个类.就可以了..

本文来自优快云博客，转载请标明出处：http://blog.youkuaiyun.com/riyao/archive/2008/08/22/2812594.aspx

Thickbox Login should have 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)正常執行^註。

備註

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