by WebSurfer
2010年11月21日 17:22
IE を使った場合、UpdatePanel 内に配置した TextBox に、ボタンクリックで非同期ポストバックした後、JavaScript でフォーカスを当てても無視されるという問題があります。
上の画像は以下のコードで描いたものです。UpdatePanel の外のボタンを操作した場合は TextBox にフォーカスを当てられますが、UpdatePanel の中のボタンを操作した場合は無視されます。
ちなみに、Firefox 3.6.12, Chrome 7.0.517.44, Opera 10.63, Safari 5.0.3 は、UpdatePanel の中/外どちらのボタンを操作しても期待通り TextBox にフォーカスが当たります。
解決策は、IE8 の場合のみですが、$('#TextBox1').focus().focus(); のように focus を 2 回かけることによって、UpdatePanel の中のボタンを操作した場合でもフォーカスが当たるようになります。ただし、IETester で試した限り、IE6, IE7 ではうまくいきません。IE6, IE7 の場合の解決策を検討中です。
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
protected void FocusTextBox1_Click(object sender, EventArgs e)
{
ScriptManager.RegisterHiddenField(Page, "Focus", "TextBox1");
}
protected void FocusTextBox2_Click(object sender, EventArgs e)
{
ScriptManager.RegisterHiddenField(Page, "Focus", "TextBox2");
}
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Focus TextBox in ControlPanel</title>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
$(function () {
var manager = Sys.WebForms.PageRequestManager.getInstance();
manager.add_pageLoaded(OnPageLoaded);
});
function OnPageLoaded(sender, args) {
var target = $('#Focus').val();
if (target == 'TextBox1') {
$('#TextBox1').focus();
}
else if (target == 'TextBox2') {
$('#TextBox2').focus();
}
}
//-->
</script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<h3>Focus TextBox in ControlPanel</h3>
<asp:Button ID="Button1"
runat="server"
Text="Focus TextBox1"
OnClick="FocusTextBox1_Click" />
<asp:Button ID="Button2"
runat="server"
Text="Focus TextBox2"
OnClick="FocusTextBox2_Click" />
<div style="border: solid 1px Silver; padding: 2px 5px;">
UpdatePanel<hr />
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>
TextBox1:
<asp:TextBox ID="TextBox1" runat="server" />
<asp:Button ID="Button3"
runat="server"
Text="Focus TextBox1"
OnClick="FocusTextBox1_Click" />
<br />
TextBox2:
<asp:TextBox ID="TextBox2" runat="server" />
<asp:Button ID="Button4"
runat="server"
Text="Focus TextBox2"
OnClick="FocusTextBox2_Click" />
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
------------ 2010/4/24 追記 ------------
この記事で紹介したコードを実際に動かして試せるよう 実験室 にアップしました。興味のある方は試してみてください。