如何防止Focus()方法将页面滚动到顶部

时间:2011-08-08 10:26:11

标签: javascript jquery asp.net css ajax

我在gridview中有一组文本框,我使用Focus()方法在丢失到预期的文本框后恢复焦点。问题是:

页面(可滚动),当我调用Focus方法时,在文本更改事件中,页面跳转到顶部。这是一种令人困惑的行为。

我的问题是:

有没有办法阻止Focus()方法将页面跳到顶部?

我的代码:

protected void txt_evaluateWeights_TextChanged(object sender, EventArgs e)
        {

            calc();
            int index = ((System.Web.UI.WebControls.GridViewRow)(((RadTextBox)sender).Parent.NamingContainer)).DataItemIndex;

            ((RadTextBox)gv_Evaluation.Rows[index + 1].Cells[3].FindControl("txt_evaluateWeights")).Focus();//Here is the problem. 
        }

注意:

  • 我使用asp:TextBox和同样的问题。

  • 我在更新面板中的网格视图


编辑:

Javascript解决方法:

var lastFocusedControlId = "";

function focusHandler(e) {
    document.activeElement = e.originalTarget;
}

function appInit() {
    if (typeof (window.addEventListener) !== "undefined") {
        window.addEventListener("focus", focusHandler, true);
    }
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoading(pageLoadingHandler);
    Sys.WebForms.PageRequestManager.getInstance().add_pageLoaded(pageLoadedHandler);
}

function pageLoadingHandler(sender, args) {
    lastFocusedControlId = typeof (document.activeElement) === "undefined"
        ? "" : document.activeElement.id;
}

function focusControl(targetControl) {
    if (Sys.Browser.agent === Sys.Browser.InternetExplorer) {
        var focusTarget = targetControl;
        if (focusTarget && (typeof (focusTarget.contentEditable) !== "undefined")) {
            oldContentEditableSetting = focusTarget.contentEditable;
            focusTarget.contentEditable = false;
        }
        else {
            focusTarget = null;
        }
        try {
            targetControl.focus();
            if (focusTarget) {
                focusTarget.contentEditable = oldContentEditableSetting;
            }
        }
        catch (err) { }
    }
    else {
        targetControl.focus();
    }

}

function pageLoadedHandler(sender, args) {
    if (typeof (lastFocusedControlId) !== "undefined" && lastFocusedControlId != "") {
        var newFocused = $get(lastFocusedControlId);
        if (newFocused) {
            focusControl(newFocused);
        }
    }
}

Sys.Application.add_init(appInit);

6 个答案:

答案 0 :(得分:3)

不是试图修复Focus方法的行为方式,而是有另一种选择。我没有尝试过,但是this page has a discussion of the problem和一些客户端javascript来记住哪个控件有焦点,然后在UpdatePanel刷新后将焦点放回到该对象上。请务必阅读评论以获取脚本的一些更新。

如果您使用此方法,则会在代码隐藏中删除对Focus on的调用,并让此脚本在客户端处理它。

答案 1 :(得分:2)

如果您正在使用更新面板和jquery,那么解决方案非常简单。假设您的文本框ID是tbDeliveryCost。而不是使用tbDeliveryCost.Focus(),执行此操作:

string script = string.Format("$('#{0}').focus();", tbDeliveryCost.ClientID);
ScriptManager.RegisterStartupScript(this, this.GetType(), "SetFocus", script, true);

答案 2 :(得分:1)

您可以尝试使用maintainScrollPositionOnPostBack选项:

<%@ Page MaintainScrollPositionOnPostback="true" %> 

答案 3 :(得分:1)

您可以使用this jQuery plugin滚动到文本框:

$(...).scrollTo( $('<%= txt_evaluateWeights.ClientID %>') )

答案 4 :(得分:1)

您可以在设置焦点后尝试此操作

Response.Write("<script type='text/javascript'>$(...).scollTo( $('<%= txt_evaluateWeights.ClientID %>') )
</script>");

答案 5 :(得分:1)

此问题已被zi lli on times提出。

这是ASP.NET JS库中的一个错误,解决方法很糟糕:

var oldScroll = window.scrollTo;
window.scrollTo = function(){};

//... the ugly ASP.NET stuff

window.scrollTo = oldScroll;

对此的最终解决方案是停止使用Microsoft ASP.NET并开始使用一种不错的技术,允许编写客户端脚本。