<%@ Page %>

Setting Initial Focus in Web Form


While designing ASP.NET web forms many times you require to set tab orders and focus of various controls. Tab orders are relatively easy as most of the web controls have a property called TabIndex. However, setting inital focus i.e. when page gets loaded for the first time in the browser window requires some coding. This article tells you how to get that done.

JavaScript to rescue

Many beginners feel that ASP.NET and client side scripts can not be used together. If used cleverly they can go hand in hand to give great user experience. The above task of setting initial focus can be easily solved by JavaScript. We can certainly write the entire javascript block at design time in the .aspx file itself but then you should already know which control to give focus. There is still flexible way to do this. In next sections we will see this with an example.


Consider that you have a web form that contains several textboxes. When the forms gets loaded in the browser window you want to take the cursor (focus) to the TextBox1. Here is how you can do that:
Private Sub 
Page_Load(ByVal sender As System.Object, 
ByVal e As System.EventArgs) 
Handles MyBase.Load

End Sub

Public Shared Sub SetInitialFocus(ByVal ctrl As Control)
Dim s As StringBuilder = New StringBuilder()
s.Append("<SCRIPT LANGUAGE='JavaScript'>")
s.Append("function SetInitialFocus()")
s.Append("   document.")

Dim p As Control = ctrl.Parent
While Not TypeOf p Is System.Web.UI.HtmlControls.HtmlForm
	p = p.Parent
End While
s.Append("window.onload = SetInitialFocus;")
ctrl.Page.RegisterClientScriptBlock("InitialFocus", s.ToString())
End Sub


Now, let us dissect the code.
  • The server side function SetInitialFocus is the heart of processing.
  • This function generates a client side javascript function called SetInitialFocus.
  • We pass to this function a control instance (TextBox1 in our example) that is supposed to get initial focus.
  • In JavaScript we need to know the form id and the control id in order to fire scripts against them.
  • Obtaining control id is easy via ClientID property.
  • However, to obtain form id we need to add the While loop that traverse the form control tree.
  • Then we specify that this client side function should be called when window.onload event fires.
  • Finally the RegisterClientScriptBlock method of the Page class is used to emit this script.
  • This method accepts key (InitialFocus) and value (our function code) as its parameters. This also avoids duplicate script blocks based on the key supplied.
  • You can pass controls to the server side SetInitialFocus method based on some logic.

I hope you found the article useful. See you soon!

Bipin Joshi is an independent software consultant, trainer, author, and meditation teacher. He has been programming, meditating, and teaching for 25+ years. He conducts instructor-led online training courses in ASP.NET family of technologies for individuals and small groups. He is a published author and has authored or co-authored books for Apress and Wrox press. Having embraced the Yoga way of life he also teaches Ajapa Yoga to interested individuals. To know more about him click here.

Get connected : Facebook  Twitter  LinkedIn  YouTube

Posted On : 14 June 2002

Tags : ASP.NET Web Forms