javascript - ASP.Net Ajax 控件工具包 "UpdatePanelAnimationExtender"破坏 jQuery focus() onload

标签 javascript jquery asp.net jquery-events ajaxcontroltoolkit

我有以下更新面板,其中的文本字段限制为 9 个字符,仅接受数字。

 <asp:UpdatePanel ID="updatePanelsearchusers" runat="server" UpdateMode="Always">
    <ContentTemplate>
        <div class="formfieldarea">
            <div id="searchfield1" class="searchfieldbox">
                <asp:Label ID="USIDSearchlbl" runat="server" Text="USID: " CssClass="formlabel" />
                <asp:TextBox ID="USIDSearchBox" runat="server" MaxLength="9" />
                <cc1:FilteredTextBoxExtender ID="FilteredTextBoxExtender1" runat="server" TargetControlID="USIDSearchBox" ValidChars="0123456789" />
                <asp:ImageButton ID="USIDsearchbutton" runat="server" ImageUrl="/tissuebank/images/searchButton.png" CausesValidation="true" OnClick="search1_Click" CssClass="searchbutton" />
            </div>
        </div>
        <div>{output from search}</div>
    </ContentTemplate>
 </asp:UpdatePanel>

下面的 JavaScript 会在字符数达到 9 时自动触发搜索按钮。

 <script type="text/javascript" language="javascript">
    function setupUSIDFocus() {
        $('#<%=USIDSearchBox.ClientID %>').focus().keyup(function () { 
           if ($(this).val().length == 9) { 
                $('.searchbutton').first().click(); 
           } 
        });
    }
    $(document).ready(function () { setupUSIDFocus(); });
 </script>  

如果我有上面的代码,它可以正常工作,并且按照我的预期加载焦点在元素 USIDSearchBox 上,但是当更新面板更新但事件不再分配给框,焦点丢失。为了解决这个问题,我添加了一个 ASP.Net Ajax 控件 UpdatePanelAnimationExtender,以便在请求完成时重新分配焦点和事件。

  <AjaxControlToolkit:UpdatePanelAnimationExtender ID="upae" runat="server" TargetControlID="updatePanelsearchusers">
      <Animations>
          <OnUpdated>
              <Sequence>
                  <Parallel duration="0">
                      <ScriptAction Script="setupUSIDFocus();" />   
                  </Parallel>             
              </Sequence>
          </OnUpdated>
      </Animations>        
  </AjaxControlToolkit:UpdatePanelAnimationExtender>

确实,这确实重置了焦点和 keyup 事件,但由于某种原因,该元素在首次加载页面时没有获得焦点。虽然 keyup 事件仍然附加在 onload 上,但我只是错过了 USIDSearchBox 字段上的焦点。如果我删除了 UpdatePanelAnimationExtender,那么我就会将焦点重新放在加载上,因此它一定与此控件有关。

有没有人知道如何获取页面的焦点onload

最佳答案

或者,您可以在“search1_Click”中使用“ScriptManager.RegisterStartupScript”在 ajax 更新后调用 jQuery 函数:

ScriptManager.RegisterStartupScript(this,this.GetType(),"myscript","setupUSIDFocus();",true);

关于javascript - ASP.Net Ajax 控件工具包 "UpdatePanelAnimationExtender"破坏 jQuery focus() onload,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8256214/

相关文章:

javascript - 自动滚动到 div 底部

jquery - 如果 DIV 可见,则禁用链接操作(jQuery - 切换)

c# - 从数组中删除空白值并建议一种更好的方法来读取由 '|' 分隔的文本文件数据

asp.net - 简单的 ASP/ASP.NET 问题。从 HTML 文本框中获取值

Javascript 垃圾回收和封装变量

javascript - 是否可以在 jqgrid 的客户端操作数据?

javascript - 如果数字是偶数,如何向下舍入,如果数字是奇数,如何向上舍入?

javascript - 在表格的 <tr> 中交替使用颜色

jquery - 如何使用 Jquery 为 div 添加/附加内容(div/img 标签等)

c# - 无法在 MVC 中绑定(bind) DropDownList