ASP.NET AJAX UpdatePanel滚动问题

发布于 2024-08-26 18:42:58 字数 476 浏览 13 评论 0原文

我会尽量简洁:

  1. 我有一个将 Autopostback 设置为 true 的下拉列表,
  2. 我有一个包含 Label 的 UpdatePanel。
  3. 当下拉列表选择更改时,我想更新标签。

问题:焦点在下拉列表上丢失,迫使用户单击下拉列表以将焦点重置回控件。

我的“解决方案”:在 DropDownList_SelectionChanged 事件中,将焦点设置回下拉列表:

dropdownlist1.focus()

虽然这在 IE 中效果很好,但 Firefox 和 Chrome 会更改滚动位置,以便定位分配焦点的控件位于浏览器窗口可见部分的底部。这通常是一个非常令人迷失方向的副作用。

如何避免这种情况,使其在 FF 中像在 IE 中一样工作?

I'll try and be concise:

  1. I have a dropdownlist with Autopostback set to true
  2. I have an UpdatePanel that contains a Label.
  3. When the downdownlist selection is changed, I want to update the label.

Problem: Focus is lost on the dropdownlist, forcing the user to click on the dropdownlist to reset focus back to the control.

My "solution": In the DropDownList_SelectionChanged event, set focus back to the drop down list:

dropdownlist1.focus()

While this works great in IE, Firefox and Chrome change the scroll position such that the control which was assigned focus is positioned at the bottom on the visible portion of the browser window. This is often a very disorientating side effect.

How can this be avoided so it works in FF as it does in IE?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(5

墨落画卷 2024-09-02 18:42:58

以编程方式尝试使用以下 3 种方式之一进行 MaintainScrollPositionOnPostback

  • - Page.MaintainScrollPositionOnPostBack = true;
  • 页面声明 - <%@ Page MaintenanceScrollPositionOnPostback="true" %>
  • 在 web.config 中 -

您可能还需要在 scriptmanager 声明之后添加此 javascript:

<script type="text/javascript">

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_beginRequest(beginRequest);

function beginRequest()
{
    prm._scrollPosition = null;
}

</script> 

Try MaintainScrollPositionOnPostback in one of these 3 ways

  • Programmatically - Page.MaintainScrollPositionOnPostBack = true;
  • Page declaration - <%@ Page MaintainScrollPositionOnPostback="true" %>
  • In the web.config - <pages maintainScrollPositionOnPostBack="true" />

You may also need to add this javascript after the scriptmanager declaration:

<script type="text/javascript">

var prm = Sys.WebForms.PageRequestManager.getInstance();

prm.add_beginRequest(beginRequest);

function beginRequest()
{
    prm._scrollPosition = null;
}

</script> 
时光倒影 2024-09-02 18:42:58

Velika - 抱歉耽搁了。
如果您使用母版页添加:

<asp:ScriptManagerProxy runat="server" ID="smp"></asp:ScriptManagerProxy>

否则只需添加

<asp:ScriptManager runat="server" id="sm" />

Velika - Sorry for the delay.
If you are using a master page add :

<asp:ScriptManagerProxy runat="server" ID="smp"></asp:ScriptManagerProxy>

Otherwise just add

<asp:ScriptManager runat="server" id="sm" />
归途 2024-09-02 18:42:58

有完全相同的问题并得到答案。希望这有帮助:
http://forums.asp.net/p/1622050/4164858.aspx#4164858

 <script type="text/javascript">  
 var xPos, yPos;  
 var postBackElement;  

 var prm = Sys.WebForms.PageRequestManager.getInstance();  
 prm.add_endRequest(EndRequestHandler);  
 prm.add_initializeRequest(InitializeRequest);  

 function EndRequestHandler(sender, args) {  
     if (postBackElement != null) {  
         document.getElementById(postBackElement.id).focus();  
     }  
 }  
 function InitializeRequest(sender, args) {    
      postBackElement = args.get_postBackElement();    
  }            

Had the exact same issue and got the answer. Hope this helps :
http://forums.asp.net/p/1622050/4164858.aspx#4164858

 <script type="text/javascript">  
 var xPos, yPos;  
 var postBackElement;  

 var prm = Sys.WebForms.PageRequestManager.getInstance();  
 prm.add_endRequest(EndRequestHandler);  
 prm.add_initializeRequest(InitializeRequest);  

 function EndRequestHandler(sender, args) {  
     if (postBackElement != null) {  
         document.getElementById(postBackElement.id).focus();  
     }  
 }  
 function InitializeRequest(sender, args) {    
      postBackElement = args.get_postBackElement();    
  }            

苏佲洛 2024-09-02 18:42:58

试试这个

<script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(beginRequest);

    function beginRequest() {
        prm._scrollPosition = window.top;
    }
</script> 

try this one

<script type="text/javascript">
    var prm = Sys.WebForms.PageRequestManager.getInstance();
    prm.add_beginRequest(beginRequest);

    function beginRequest() {
        prm._scrollPosition = window.top;
    }
</script> 
活雷疯 2024-09-02 18:42:58
public static void SetFocusByJavaScript(Page page, string clientID)
        {
            string uniqueScriptId = String.Concat("focusScript", clientID);
            string scriptBody = String.Format("setTimeout(\"$get('{0}').focus();\", 100);", clientID);
            ScriptManager.RegisterStartupScript(page, page.GetType(), uniqueScriptId, scriptBody, true);
        }

这就是我一直在解决这个问题的方法。该示例需要 jquery,但如果需要,您可以重写。基本上只是延迟焦点脚本。

public static void SetFocusByJavaScript(Page page, string clientID)
        {
            string uniqueScriptId = String.Concat("focusScript", clientID);
            string scriptBody = String.Format("setTimeout(\"$get('{0}').focus();\", 100);", clientID);
            ScriptManager.RegisterStartupScript(page, page.GetType(), uniqueScriptId, scriptBody, true);
        }

This is how I have been getting around this issue. The example requires jquery, but you could rewrite if needed. Basically just delays the focus script.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文