Question

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

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

Answer 1

我的主要问题是当时钟滴答时，在写入过程中文本框失去焦点。我有两个文本框所以在我检查的代码后面的tick事件中，如果第一个有文本而第二个没有我知道焦点应该在第一个所以我给它Focus（）并且如果有文本在第二个文本框，意味着焦点应该在那里。这是代码：

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

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

Answer 2

我发现问题只发生在我通过txtBox.Focus（）这样的代码设置焦点的页面上，但是我没有通过代码设置焦点的页面没有问题。所以我尝试将Focus（）命令放入if if backback条件中。

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

解决了所有问题。

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>

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>

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>

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

4 个答案: