简体   繁体   中英

How to prevent the Focus() method from scrolling the page to the top

I have set of textboxes in a gridview and I use the Focus() method to restore the focus after losing to the intended text box. The problem is :

The page (scrollable) and when I call the Focus method, in the text changed event, the page jump to the top. It's such a confusing behavior.

My question is:

Is there some way to prevent the Focus() method from jumping the page to the top?

My code:

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. 
        }

Note:

  • I use the asp:TextBox , and the same problem.

  • My grid view in an update panel


EDIT :

Javascript workaround:

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);

Rather than trying to fix the way the Focus method behaves, there is an alternative. I haven't tried it, but this page has a discussion of the problem , and some client-side javascript to remember which control had the focus, and then put the focus back on that object after the UpdatePanel gets refreshed. Be sure to read the comment for some updates to the script.

If you use this method, you would remove the call to Focus on in your codebehind, and let this script deal with it on the client.

Provided that you're using update panels and jquery, the solution is quite straightforward. Let's say your textbox ID is tbDeliveryCost. Instead of using tbDeliveryCost.Focus(), do this:

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

您可以尝试使用maintainScrollPositionOnPostBack选项:

<%@ Page MaintainScrollPositionOnPostback="true" %> 

您可以使用此jQuery插件滚动到您的文本框:

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

You can try this after you set focus

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

This question has been asked a zi lli on times .

It's a bug in ASP.NET's JS library and the workaround is hacky:

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

//... the ugly ASP.NET stuff

window.scrollTo = oldScroll;

The definitive solution to this is to stop using Microsoft ASP.NET and start using a decent technology that allows you to script the client side.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM