Control focus and Default button in ASP.net

Setting focus to a control is simple known one for most of us. A focus means the control is going to receive the input from the user. If you type something, the typed stuff goes into the control which currently on focus.

 

Default button is mapped to the enter keystroke on your keyboard. That is, the enter button hit will call the button pushed event of the default button.

 

2. About the ASP form and the Example

 

Have a look at the simple asp form below:

 

1. When the Page loaded, the default focus is set to the textbox control next to the name label field.
2. When the tab key is hit, the focus moves in a sequential way.
3. When you press the Claim button, some message is displayed in the label field shown in yellow color.
4. When the focus is in the any of three textboxes that corresponds to name or discount id or order number, hitting the enter button on your keyboard invoked claim button press
5. The next button to the claim sets the focus to the Order number text box
6. When the control is in the Product name textbox, hitting the enter button will invoke the search button click.

All the above stuff accomplished by the default focus and default button properties. 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 the Properties

1. Tab index 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. This sequence is controlled by the tab index property. The framework maintains a count and increments it when a tab key is pressed. And resets it when a maximum number (Max of tab index in the form) reached. The tab index of the control is compared with this Framework count and control with the matched tab index is get focused. Now look at the tab index property for all the control one by one and run the page hit the Tab and shift + tab to experiment the result.
    
2. The Associated control id property is set to each label control to move the focus to the control specified here. Because, a label control usually won't receive focus. The next box next to the label is set as the associated control.
3. Default Focus property is used to set focus to a particular when the user interface loaded and shown initially.
4. Default Button property can be used to link the enter button keystroke to a click event of the push button. A form can have one default button. Look at the above form; if person typed a product name and hits enter, he does expect it will trigger the search button click not the claim button click. So in that case, the group product name label, textbox associated to it and the search button is kept in the panel control. First a panel (Container) is placed on the form and then the three controls placed on it. Now we can have two default button properties; One for the form and one for the panel. To see the properties for the form, so to the source page and click on the form tag. I tried to pick the form from the design layout, but I cannot able to get it. Kind of searching the hidden cat "Kitty..Meow  KittyKitty Kitty..". Well but you can easily select the panel to view it's property. Now run the application, fill something on the claim form, and hit enter. Run again, put something in the product name text box and hit enter.