Question

我有一个相当复杂的网络应用程序，我已经缩减到以下两个HTML页面，问题仍然存在。问题？厚箱模态（iframe）输入字段在IE（8＆amp; 9）中的第二（或更少）之后失去焦点。它只发生在模态中。如果你自己加载页面，焦点就不会丢失。

我已经尝试了jQuery 1.4.2和1.7.2，每个问题都会出现。我将其设置为jsfiddle，但不认为它支持能够触发第二页。已设置好以便查看working here

基页：

<!DOCTYPE HTML>
<html>
<head>
<link href="http://jquery.com/demo/thickbox/thickbox-code/thickbox.css" media="screen" rel="stylesheet" type="text/css" >
</head>
<body>
<a id="createAccountLink" class="thickbox" href="test2.html?KeepThis=true&TB_iframe=true&height=400&width=600">Login</a>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="http://jquery.com/demo/thickbox/thickbox-code/thickbox.js"></script>
</body>
</html>

模态：

<html>
<head>
</head>
<body>
<input type="text" id="ContactFormName" name="firstName" class="text" value="" />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
$("#ContactFormName").focus();
</script>
</body>
</html>

如果我是从头开始构建这个，我就不会使用thickbox。但改变它现在不是一个真正的选择，因为它在其他地方被大量使用。

答案重点必须推迟。即使1ms也可以。

setTimeout (function () {
$("#ContactFormName").focus();
}, 1);

Answer 1

焦点必须延迟。即使1ms也可以。

setTimeout (function () {
$("#ContactFormName").focus();
}, 1);

Answer 2

对于ASP.NET，我创建了一个扩展方法：

public static void FocusDelayed(this WebControl control, Page page)
{
    ScriptManager.RegisterStartupScript(page, page.GetType(), "focusDelayed", "setTimeout (function () { document.getElementById(\"" + control.ClientID + "\").focus(); }, 500);", true);
}

所以，在弹出窗口的onload Page_Load中我称之为

protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            controleName.FocusDelayed(Page);                
        }
    }

希望它对某人有帮助。

干杯

IE失去了对模态中输入字段的关注

2 个答案: