定时器触发更新面板更新导致失去焦点

Question

我用ajax定时器在一个ajax更新面板中制作了一个时钟来显示当前时间。计时器设置为每分钟触发一次tick事件，将当前时间放入标签中。页面上有许多文本框，当时钟更新时，光标跳到默认的焦点控件处，页面滚动到顶部。这使得填写表单变得困难，无法连续进行。我该如何保持控件焦点和滚动位置？ 我在这里找到了一个答案Maintaining focus on ajax update panel after updating form，但它使用了不完整的javascript代码（他写的伪代码）。我对javascript很弱，所以有人能给我提供一个更详细的解决方案或另一个替代方案吗？ 谢谢。

编辑：是否没有一种简单的方法可以在页面重新加载时找到具有焦点的控件并将焦点重置为该控件？最好是用c#，如果不能用javascript。

- Dov Miller

---

你是否在使用一个UpdatePanel来包含计时器和带有文本框的表单？如果是这样，请为计时器标签使用单独的UpdatePanel，再为表单使用另一个UpdatePanel。 - sathishkumar

@sathishkumar，我只有一个UpdatePanel，但只有计时器和接收时间的标签在其中。表单的其余部分根本不在UpdatePanel中。 - Dov Miller

为什么不利用JavaScript计时器，这样就不会有页面回发效果... - Madhu Beela

@Madhu，你能给我演示一下吗？正如我所写的，我对JavaScript不太熟悉。 - Dov Miller

这是一个链接，可以帮助你解决问题 试一下。 - Madhu Beela

@Madhu 谢谢你提供的链接。我尝试了一下，但没有成功。我觉得原因是它适用于 PHP SSI 和 ASP 显然是经典 ASP，但不适用于我正在使用的 ASP.NET。 - Dov Miller

Answer 1

我发现问题只出现在我通过代码设置焦点的页面上，例如txtBox.Focus()，但是在我没有通过代码设置焦点的页面上就没有问题。因此，我尝试将Focus()命令放在if not postback条件中。

if(!isPostback)
{
   txtBox.Focus();
}

那解决了所有的问题。

- Dov Miller

Answer 2

我的主要问题是在编写过程中，当时钟滴答作响时，从文本框失去焦点。我有两个文本框，所以在代码后台的tick事件中，我检查第一个文本框是否有文本而第二个没有，如果是，我知道焦点应该在第一个文本框中，所以我给它Focus()，如果第二个文本框中有文本，那么焦点应该在那里。这是代码：

if (!string.IsNullOrEmpty(txtSolution.Text) && string.IsNullOrEmpty(txtRemarks.Text))
        {
            txtSolution.Focus();
        }
        else if (!string.IsNullOrEmpty(txtRemarks.Text))
        {
            txtRemarks.Focus();
        }

这解决了光标失去焦点和滚动位置跳跃的问题。 问题：如果用户在第一个文本框中完成写作并移动到第二个文本框，但尚未开始写作，则会跳回第一个文本框。或者如果他从第二个返回到第一个，则会跳转到第二个。否则它工作正常。

- Dov Miller

Answer 3

您的更新面板具有ContentTemplate，但请检查是否有AsyncPostBackTrigger。

<asp:UpdatePanel ID="updatepanel1" runat="server">
  <Triggers>
    <asp:AsyncPostBackTrigger ControlID="tmrUpdate" EventName="Tick" />
  </Triggers>
  <ContentTemplate>
    <div>content updating</div>
  </ContentTemplate>
</asp:UpdatePanel>

- Catto

Answer 4

将这段代码放在您的脚本管理器之后，也可以全局解决问题。我刚测试了一下，效果非常好。

<script type="text/javascript">
    try 
    {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function beginRequest() {
            prm._scrollPosition = null;
        }
        prm.add_beginRequest(beginRequest);


    }
    catch (err) {
        alert(err);
    }
</script>

如此看来

这是我用来测试的代码。我只是让计时器每100毫秒更新一个空的更新面板，以便更容易地看到问题。如果您注释掉脚本管理器下面的<script type="text/javascript">....<script>，您将看到在某些浏览器中几乎不可能向下滚动页面的情况。

Default.aspx

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeFile="Default.aspx.cs" Inherits="_Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">

</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
 <asp:ScriptManager ID="ScriptManager1" runat="server" />

<script type="text/javascript">
    try 
    {
        var prm = Sys.WebForms.PageRequestManager.getInstance();
        function beginRequest() {
            prm._scrollPosition = null;
        }
        prm.add_beginRequest(beginRequest);


    }
    catch (err) {
        alert(err);
    }
</script>


        <asp:Timer ID="Timer1" Interval="100" runat="server" />
        <asp:UpdatePanel ID="up1" runat="server">
            <Triggers>
                <asp:AsyncPostBackTrigger ControlID="Timer1" EventName="Tick" />
            </Triggers>
            <ContentTemplate>

            </ContentTemplate>
        </asp:UpdatePanel>

<br /><br />
        <div style="min-height:2000px"></div>


</asp:Content>

- clamchoda