Be nice to nerds. Chances are you'll end up working for one. --Bill Gates

Set Initial Focus on an ASP.NET Page

Easily generate the Javascript to set focus to any control on your ASP.NET page

By steve on Tuesday, January 9, 2007.
Updated Saturday, January 12, 2013.
Viewed 27,554 times. (1 times today.)
DeveloperTips and TutorialsC#JavascriptWeb

Summary

Setting the cursor focus to a particular element of a web page when it loads is a pretty common little feature, but it can be annoying to implement. Here I automated the process in a C# method. You only need to pass the Control to the method and it will register the Javascript and set focus on page load.

This code was adapted from work by Fons.Sonnemans@reflectionit.nl.

Setup a couple of text boxes to test by adding the following to your aspx page.

Example: How to use the SetInitialFocus method

<P><asp:TextBox id="TextBox1" runat="server"></asp:TextBox>
<P><INPUT id="htmlTextBox" type="text" runat="server">

Then call the following method from the Page_Load in the code behind file. Notice that this works for WebControls and HtmlControls.

Example: How to use the SetInitialFocus method

public void TestSetInitialFocus()
{
   //Snippets00004.SetInitialFocus(TextBox1);
   Snippets00004.SetInitialFocus(htmlTextBox);
}

If you load the test aspx page in your browser, you should see that the selected control has the cursor focus.

Here's the class:

The SetInitialFocus method embedded in a class.

namespace Cambia.CoreLib
{
   using System;
   using System.Text;
   using System.Web.UI;
   using System.Web.UI.WebControls;

   /// <summary>
   /// Useful C# snippets from CambiaResearch.com
   /// </summary>
   public class Snippets00004
   {

      public Snippets00004()
      {
      }

      public static void SetInitialFocus(Control control) 
      {
         if (control.Page.IsClientScriptBlockRegistered("InitialFocus"))
            return;

         if (control.Page == null) 
         {
            throw new ArgumentException(
               "The Control must be added to a Page before "
               + "you can set the IntialFocus to it.");
         }
         if (control.Page.Request.Browser.JavaScript == true) 
         {
            // Create JavaScript
            StringBuilder s = new StringBuilder();
            s.Append("\n<SCRIPT LANGUAGE='JavaScript'>\n");
            s.Append("<!--\n");
            s.Append("function SetInitialFocus()\n");
            s.Append("{\n");
            s.Append("   document.");

            // Find the Form
            Control p = control.Parent;
            while (!(p is System.Web.UI.HtmlControls.HtmlForm))
               p = p.Parent;
            s.Append(p.ClientID);

            s.Append("['");
            s.Append(control.UniqueID);

            // Set Focus on the selected item of a RadioButtonList
            RadioButtonList rbl = control as RadioButtonList;
            if (rbl != null) 
            {
               string suffix = "_0";
               int t = 0;
               foreach (ListItem li in rbl.Items) 
               {
                  if (li.Selected) 
                  {
                     suffix = "_" + t.ToString();
                     break;
                  }
                  t++;
               }
               s.Append(suffix);
            }

            // Set Focus on the first item of a CheckBoxList
            if (control is CheckBoxList) 
            {
               s.Append("_0");
            }

            s.Append("'].focus();\n");
            s.Append("}\n");

            if (control.Page.SmartNavigation)
               s.Append("window.setTimeout(SetInitialFocus, 500);\n");
            else
               s.Append("window.onload = SetInitialFocus;\n");

            s.Append("// -->\n");
            s.Append("</SCRIPT>");

            // Register Client Script
            if (!control.Page.IsClientScriptBlockRegistered("InitialFocus"))
               control.Page.RegisterClientScriptBlock("InitialFocus", 
                  s.ToString());
         }
      }

   }
}
Back to Top

Share This Page:


Subscribe for free and read it when and where you want!

Get the latest tips and tools in your Inbox.

Your email address will NEVER be shared and you can unsubscribed at any time using the link at the bottom of every email.

Click Here to Subscribe

(Was this post helpful? If not, please leave a comment and let me know what you would like to hear about.)


 
comments powered by Disqus
Follow:
Share This Page:


Get the latest tips and tools in your Inbox. It's 100% free.



Click Here to Subscribe
Welcome!
Welcome to my blog about software development and the Microsoft stack.

I've been a full time .NET developer for fifteen years, but I didn't start my professional life as a programmer ... more