UpdatePanelAnimationExtender

UpdatePanelAnimationExtender

我有以下更新面板,其文本字段限制为仅接受数字的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,则将焦点重新放在负载上,因此必须与该控件有关。

有谁知道如何使页面专注于加载?

最佳答案

另外,您可以在ajax更新后使用“ search1_Click”中的“ ScriptManager.RegisterStartupScript”来调用jQuery函数:

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

10-02 12:04