How do I maintain focus position in UpdatePanel after page partial post back

Question

I have four controls in a page with update panel. Initially mouse focus is set to first control. When I partially post back the page to server the focus automatically moves to first control from the last focused control from the control I have tabbed down to. Is there any way to maintain the last focus?

Solution 1

Take a look at Restoring Lost Focus in the Update Panel with Auto Post-Back Controls:

The basic idea behind the solution is to save the ID of the control with input focus before the update panel is updated and set input focus back to that control after the update panel is updated.

I come with the following JavaScript which restores the lost focus in the update panel.

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

Solution 2

I find this more elegant:

    (function(){
    var focusElement;
    function restoreFocus(){
        if(focusElement){
            if(focusElement.id){
                $('#'+focusElement.id).focus();
            } else {
                $(focusElement).focus();
            }
        }
    }

    $(document).ready(function () {
        $(document).on('focusin', function(objectData){
            focusElement = objectData.currentTarget.activeElement;
        });
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(restoreFocus);
    });
})();