Restore Focus after TextBox Automatic Postbacks
Learn how to restore focus after automatic postback within an UpdatePanel.
- Jing Ding, Senior Systems Consultant of The Ohio State University Medical Center

June 5, 2009
Iron Speed Designer V6.X

Introduction
Postbacks triggered by a DropDownList or a Check Box are hardly noticeable. However it’s a different story when an UpdatePanel refreshes its content after a partial automatic postback. Specifically, two side-effects will occur.
  • Loss of focus: None of the controls on the page will have the focus unless it is explicitly set in the server-side code.

  • Loss of data: Any data changes made between the moment when the postback is triggered and the moment when the postback is finished are wiped out.
For example, a user enters data in a Text Box and presses the Tab key to move to the next field and begins typing. Seconds later, the content in this text box disappears and the user is forced to reenter the data. In this article, I will show you how to save time and prevent the above scenario from happening.

Solution
The root cause of these issues is derived from the way an UpdatePanel is refreshed on partial postback. When an ASP.NET page receives the result of a partial postback, it clears out the current content on the UpdatePanel and resets the inner HTML to a newly received result. All of the DOM objects within the UpdatePanel are destroyed and recreated, resulting in the loss of focus and data.

The best solution, of course, is to avoid postbacks in the first place. However, there are times when developers use postbacks for convenience instead of business logic. If the business logic of the postbacks requires no new data from database, (i.e., all information is already available on the client-side), then it can and should be handled with client-side JavaScript code.

However, if new data is required, there is an alternative solution in PageMethods, which is used by Iron Speed Designer’s popup text and image. PageMethods sends to and receives from the server much less data than partial postbacks. They apply the results to existing DOM objects instead of destroying and recreating them, thus preserving the focus and data.

If the two solutions above are not applicable to your page and postback is your only option, there is not much you can do to prevent data loss. The best you can do is to make the server process as fast as possible. However, you can prevent focus loss, or more precisely, restore focus with some JavaScript code.

Implementation
The following JavaScript code is modified from Yuriy Solodkyy’s blog.... Append it to the end of ~\ApplicationWebForm.js for existing projects. You may also append it to a code template in Iron Speed Designer’s installation folder here: \ProjectTemplates\vs200x\cs(vb)\ApplicationWebForm.js. This will ensure that changes are applied to future projects.

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();
          } catch (err) {}
      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);
        }
    }
}

Next, in ~\App_Code\Shared\BaseApplicationPage.cs (vb), find the method Control_ClearControls_PreRender() and insert the commented code block “Register RestoreFocus.”

C#

protected void Control_ClearControls_PreRender(object sender, EventArgs e) {
    this.ClearControlsFromSession();
 
    // Register RestoreFocus
    if(!IsPostBack)
      ScriptManager.RegisterStartupScript(this, GetType(), "RestoreFocus",
        "Sys.Application.add_init(appInit);", true);
}

VB .NET

Protected Sub Control_ClearControls_PreRender(ByVal sender As Object, ByVal e As EventArgs) Me.ClearControlsFromSession()
 
    ' Register RestoreFocus
   If Not IsPostBack Then
    ScriptManager.RegisterStartupScript(Me, [GetType](), "RestoreFocus", _
        "Sys.Application.add_init(appInit);", True)
   End If
End Sub
Now all pages will return the focus to the previous owner before postbacks.

Conclusion
Text Box automatic postbacks may cause loss of focus and data. The best solution is to avoid them. But if using automatic postbacks is necessary, try restoring focus with JavaScript code.

About the Author
Jing Ding has a PhD in Computer Engineering, Bioinformatics and Computational Biology, and an M.S. in Toxicology from Iowa State University. He received his B.S. in biophysics from Fundan University in Shanghai, China. He is a self-taught programmer who "played" with assembly, C and C++ in the 1990s. He took a break from programming from 1997 to 2000. When he picked it up again in 2001, he worked with Java. Jing began working with C# and .NET in 2006.


       Copyright © 2005-2009, Iron Speed, Inc. Iron Speed® is a registered trademark. All rights reserved. Privacy Statement