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

【问题标题】：Timer triggering update panel update causing loss of focus定时器触发更新面板更新导致失去焦点
【发布时间】：2013-05-11 08:48:34
【问题描述】：

我制作了一个时钟，在 ajax 更新面板中使用 ajax 计时器显示当前时间。计时器设置为一分钟触发滴答事件，该事件将当前时间放入标签中。页面上有许多文本框，当时钟更新时，光标会跳转到默认的焦点控件，页面会跳转到顶部。这使得在没有中断的情况下很难填写表格。如何保持控制焦点和滚动位置？我在这里找到了答案Maintaining focus on ajax update panel after updating form，但它使用的是没有完整代码的javascript（他写的伪代码）。我在 javascript 方面很弱，所以有人可以给我一个更详细的解决方案或另一种选择吗？谢谢。

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

【问题讨论】：

您是否使用一个更新面板，其中计时器和表单都带有文本框？如果是这样，请为计时器标签使用单独的更新面板，为表单使用另一个更新面板。
@sathishkumar 我只有一个更新面板，但其中只有接收时间的计时器和标签。表单的其余部分根本不在更新面板中。
为什么不使用javascript定时器，这样就不会有回发效果...
@Madhu 你能告诉我怎么做吗？正如我所写，我在 javascript 方面很弱。
这里是可以帮助你的链接try this

标签： c# asp.net ajax timer updatepanel

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

我发现问题只出现在我通过txtBox.Focus()之类的代码设置焦点的页面上，但我没有通过代码设置焦点的页面没有问题。所以我尝试将 Focus() 命令置于 if not postback 条件下。

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

这解决了所有问题。

【讨论】：

【解决方案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>

【讨论】：

【解决方案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>

As seen here

这是我测试它的代码。我只是让计时器每 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>

【讨论】：