ASP.NET AJAX UpdatePanel lost focus problem

If you like to use a keyboard to navigate a web form that uses an ASP.NET UpdatePanel, you will soon find that once a post back occurs you lose your position in the form.

There has been several solutions to this problem, but I finally found one that works really well. Unlike many, it handles all possibilities: (a) you tab to the next field; (b) you shift-tab to the previous field; and, (c) you stay in the same field (eg. use arrow keys to select DropDownList option).

Source: http://dotnetgyaan.blogspot.com.au/2011/12/restore-lost-focus-of-auto-post-back.html

First step is to create a JavaScript file and add the following code:

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;
        }
        targetControl.focus();
        if (focusTarget) {
            focusTarget.contentEditable = oldContentEditableSetting;
        }
    }
    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);

Then in your markup, add a script reference to the JavaScript file you created. In this case I called it Refocus.js and located it in the root folder.

<asp:ScriptManager ID="ScriptManager1" runat="server">
        <Scripts>
            <asp:ScriptReference Path="~/ReFocus.js" />
        </Scripts>