1. Default Focus and Default Control – Introduction
In this short article, we will learn the importance of setting the default control focus. Also, we will explore setting the default button for a form and for a group of controls.
Most of the computer programmers or software users know what is control focus. In windows operating system, it sends all the keyboard and mouse signals to the control in focus. If we type something, the typed stuff goes into the control in focus.
The browser of the windows form maps the default button to the Enter keystroke on the keyboard. Pressing the Enter button on the keyboard will call the button clicked event of the default button.
2. Example Web Form for Default Focus and Button
Have a look at the simple asp form below:
Default Focus and Default Button – Web Form Example
In the above web form example, we can summarize what we will implement as follows:
- When the Page loads, the text box control next to the name label field gets the focus. So we call the default focus is on this control.
- When the user hits the tab key, the focus shifts in a sequential way from one control to other control.
- The label field shown in yellow color shows information message when Claim button is pressed.
- When the focus is on any of the three text boxes (Name, Discount Id, Order Number), hitting the enter button on the keyboard invokes click event of the claim button.
- Clicking the button next to the Claim Button sets the focus to the Order number text box. Here, one can learn how to set focus to a control at run-time dynamically.
- When the control focus is in the Product name text box, hitting the enter button will invoke the search button click.
All the above stuff can be accomplished by the default focus and default button properties of the control. Of course, there is a minimal piece of code to display the message in the label and invoking a function that sets the control focus.
3. Setting Default Focus and Default Button Properties
3.1 Control Focus by TabIndex Property
TabIndex Property
allows which control to should get focus when a keyboard Tab key pressed. Each consecutive Tab press allows the control focus in a particular sequence. The
TabIndex Property
controls this sequence. Dot.Net Framework maintains a count and increments it when a user hits the Tab key and resets it after reaching the maximum index. The number in the
TabIndex Property
of the control is compared with this Framework count. Asp.net sets the focus to the control that matches with this count. You can look at the
TabIndex Property
for all the control one by one from the downloaded example. Now we can run the page & hit the Tab key consecutively to watch how focus shifts from one control to another control in a sequential order. The numbers which we set in the
TabIndex Property
for each control defines this sequential order. We also can experiment pressing Shift + Tab combination to see control focus happening in the reverse order.
3.2 Label’s AssociatedControlId Property
One can set the
AssociatedControlId Property
to a label to link a control with it. So when Asp.Net sees current index belongs to a label, it checks this property to see where to focus for the user input. Since a label control will not receive focus, we set this property to a control where focus is meaningful. For example, we set
AssociatedControlId Property
of the Name label to the text box next to it. We can check this property for each label control from the downloaded example.
3.3 DefaultFocus Property
DefaultFocus property
is used to set focus to a particular control when the user interface is loaded and shown initially.
3.4 DefaultButton Property
The
DefaultButton Property
can link the Enter Key stroke to a click event of a Push Button. A Form can have one Default Button. Now, we have a look at Example Web Form; if the person typed a product name and hits Enter Key, he or she expects it will trigger the Search Button click not the Claim Button click. So, in that case, product name label, the text box for the product name and the Search Button is kept in a panel control so they are in a group together. First, we place a panel (Container) on the Form and then we drop the above said three controls on it. Because of the controls grouped under a panel, we can set two
DefaultButton
Properties; One is for the Form and another one is for the Panel. Now we can run the application, fill something on the Claim Form, and hit Enter Key. Run again, put something in the product name text box and press Enter Key. We can observe, how current control focus automatically hooks the different Button click with the Enter Key Press.
4. Complete Code Example – C# Code Behind
In the code we use <br/> tag to form multiple lines of text in the yellow-colored label control. We also use the focus method of control to set the focus on it and run-time. Rest of the code is self-explanatory and there is nothing new to specify. The code is below:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
using System; using System.Data; using System.Configuration; using System.Web; using System.Web.Security; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.UI.WebControls.WebParts; using System.Web.UI.HtmlControls; public partial class _Default : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { //Focus 001: Set the Default focus to the //Name text Box txtName.Focus(); } protected void txtFocustoLabel_Click(object sender, EventArgs e) { //Focus 002: Set the focus to required control txtOrderNo.Focus(); } protected void btnClaim_Click(object sender, EventArgs e) { //Focus 003: Write some text to the Label LblDisplay.Text = "Discount amount Claimed! <br/>" + "Name : " + txtName.Text +"<br/>" + "Discount Id (Found on Lucky Coupon) :" + txtDiscount.Text +"<br/>" + "Order No (for Reference): " + txtOrderNo.Text ; } protected void btnSearch_Click(object sender, EventArgs e) { //Focus 004: Write Some text to the Label LblDisplay.Text = "Searching Product Id... <br/>" + txtProdname.Text + ". Please don't wait! It is Just a demo"; txtProdname.Focus(); } } |
You can download the example from the download link here: Download Example from Google Drive
The example code was developed in Visual Studio 2005 and If you have latest version, say yes to the conversion wizard.
Categories: Asp 2.0
Tags: ASP Default Button, ASP Default Focus, AssociatedControlId, TabIndex
Do you like this Example? Please comment about it for others!!
This site uses Akismet to reduce spam. Learn how your comment data is processed.