Focus in ASP.NET Controls

To provide even better experience for your Web application users, you need to give them a logical and as simple as possible user interface. One of the common tasks when building effective and friendly web applications is management of control's focus, usually text boxes, buttons, dropdown lists etc. Whatever kind of application you build, you will always need make your UI more efficient.

One simple and very familiar sample of using focus to provide a better interface you can find on Google. When you navigate your browser to Google, and start page is loaded, focus is automatically set and cursor is placed inside of the search textbox. Visitor can start typing search terms immediately and he or she is not forced to take a mouse and click inside of search textbox to start typing. Google wants to make using of their search engine fastest and easiest as possible, so after you write a search terms you can simply press Enter key instead of taking a mouse again and clicking on Search button (more about using of Enter key and solving that problem you can find on Enter Key in ASP.NET article). Note that you still can do a mouse click on Search button if you want, you simply choose a way you like more.

Your application could be small or complex, but the maxim is always the same: make your users happy and let them do their tasks easier, faster and more effective.

Easiest way to set a focus when web page is loaded

To set a focus when web page is loaded you can use a BODY onload event and javascript client code. Let say you have a web form with ID="Form1" with some controls, including a textbox named TextBox1. To set a focus to TextBox1 when page is loaded you can use this javascript code:

VB.NET programmers should take care that javascript is case sensitive language.

As you can see, there is no ASP.NET server side code in this sample, all is done by client side javascript. Because of that, this sample can be used in classic ASP too, or some other server side language (e. g. PHP) or even in pure HTML pages.

Set a focus dynamically with ASP.NET

The code snippet above could be very useful, but what if you have to dynamically change what control will take focus when your application running? Maybe you simply like to have all your code in one place to separate design and programming tasks. In both cases, you can set a focus dynamically with ASP.NET code like this:

[VB.NET]

Page.RegisterStartupScript("SetFocus", _
"<script>document.getElementById('" & TextBox1.ClientID & _
"').focus();</script>")

[C#]

Page.RegisterStartupScript("SetFocus", "<script>document.getElementById('" + TextBox1.ClientID + "').focus();</script>");

This line of code will set focus to TextBox1 textbox when page is loaded. It is usually used in Page_Load event function.

Set Focus in ASP.NET 2.0 and ASP.NET 3.5

ASP.NET 2.0 simplified this problem and introduce a concept of "default focus". There is a new DefaultFocus attribute that allows you to easily set focus to desired controls. The sample HTML code bellow will set focus on control named textbox1:

ASP.NET 2.0 provides three different new solutions if you need to set focus dynamically. At run time you can use Page.SetFocus method with control's ID as a parameter or you can simply call a new control's Focus method. They both do practically the same thing. It is only programmer's choice to choose which method likes more.

There is also DefaultFocus property of the form element. Set this property to ID of wanted control, run the project and that control will get focus when page is first time loaded.

Conclusion

I hope this article was helpful for you to understand how you can set a focus in classic ASP, ASP.NET 1.1, ASP.NET 2.0 and ASP.NET 3.5 web applications. In ASP.NET 2.0 and higher this problems become much easier and solved on a way similar to forms programming in Windows.

You can set focus with keyboard shortcut too by using Bean Software Keyboard Shortcut Controls. Also, with these controls you can manipulate with different keyboard shortcuts in your web application without need to write any code. That could be simple keyboard shortcuts like using Enter key to submit web form or more complicated like Ctrl + Shift + O or similar, just like shortcuts used in Windows applications. Source code is included.

Some notes at the end, if control is hidden, then it can not receive a focus. Also, client side code provided in this tutorial will work on client browsers only if your visitor has enabled javascript.

Tutorial toolbar: Tell A Friend | Add to favorites | Feedback | Google