如何在异步回发中保持控制焦点？答案

【问题标题】：How can control focus be maintained across async postbacks?如何在异步回发中保持控制焦点？
【发布时间】：2010-08-03 15:30:44
【问题描述】：

我有这样的页面设置：

<ajax:UpdatePanel id="UpdatePanel1" runat="server" UpdateMode="Conditional">
  <ContentTemplate>
    <asp:TextBox id="TextBox1" runat="server" AutoPostBack="true"/>
    <asp:TextBox id="TextBox2" runat="server" AutoPostBack="true"/>
  </ContentTemplate>
</ajax:UpdatePanel>
<asp:TextBox id="TextBox3" runat="server"/>

只要 TextBox1 或 TextBox2 发生变化，就会发生异步回发。这当然是通过在更改文本后将焦点移动到不同的控件来启动的。问题是当异步回发完成控制时，获得焦点的人失去了焦点。它是在更新面板内部还是外部都没有关系。

我已尝试将 javascript 添加到母版页：

<script type="text/javascript">

  var lastFocused = null;

  $(document).ready(function() {

    $('input').focus(function() {
      lastFocused = this;
    });

    $('.dropdown').focus(function() {
      lastFocused = this;
    });

  });

  function RestoreFocus(source, args) {
    if (lastFocused != null)
      lastFocused.focus();
  }

  function AddRequestHandler() {
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_pageLoaded(RestoreFocus);
  }
</script>

随着

<body onload="AddRequestHandler">

我知道 lastFocused 正在获取一个值并且 RestoreFocus 正在运行，但无论何时运行，lastFocused 的值都是 null。

是否有人对我的 javascript 有修复或一般问题的解决方案？

【问题讨论】：

标签： asp.net jquery ajax asp.net-ajax

【解决方案1】：

这里有几个问题，很容易解决！由于这些元素被替换，.focus() 处理程序不会粘住，您需要.live()，如下所示：

var lastFocused = null;
$(function() {
  $('input, .dropdown').live('focus', function() {
    lastFocused = this;
  });
});

注意：你需要 jQuery 1.4.1+ 来支持 focus 事件 .live()

你也应该使用一次add_endRequest，像这样：

Sys.WebForms.PageRequestManager.getInstance().add_endRequest(RestoreFocus);

endRequest 在异步回发完成时触发，而不是仅在初始页面加载时触发。

【讨论】：

这似乎确实有效，尽管我还必须更改 RestoreFocus 以根据 id 搜索控件。我怀疑是因为更新面板中的控件是全新的？