Introduction:
Please Note: Currently, this article applies to the stand alone pages, where there is no master-child pages concept.
In this article, we explain a very common scenario wherein a developer is required to do very common tasks, namely, setting the input focus to a web-control like a textbox among a group of web-controls on a web-page and also calling a particular button's event-handler, for example, say a "Submit" buttons event handler on an event like "ENTER" key pressed on keyboard.
Background
EXPLAINING THE SCENARIO AND WHAT ALREADY EXISTS IN PLENTY OVER THE NET :
SCENARIO:
For many web-pages which serve as collecting some data from the user, right from small web-pages which accept just two inputs like "username" and "password" to very big/exclusive web-pages like accepting "customer information", there is a common need for doing following two tasks:
1.) Setting the focus to a particular web-control among the group of web-controls on the web-page.
1.1) Programatically moving the focus from one web-control to another. for e.g. once the username is accepted shift the focus to password textbox.
2.)When the user is done with entering the data on a web-page, if he just presses ENTER KEY, a paricular button, like "Submit" button's event-handler should be called upon for processing.
COMMONLY FOUND SOLUTIONS OVER THE NET:
For Point no. 1) as above, write a javascript which works on page load and finally call a control's .Focus() method so that it can receive the focus.
For Point no. 1.1) as above, for each control's "LOSE FOCUS" event execute javascript and programatically set the focus to the next/required control by again calling that control's .Focus() method.
For Point no. 2) as above, write javascript which will tap the "KEY PRESSED EVENT" and equate the hexa-code with "ENTER" key's hexa-code and if it equates correctly do the processing accordingly.
EFFECTIVE/SIMPLE SOLUTION:
-- With .Net Framework v2.0 onwards, there exists a simple ONE LINER SOLUTION to all these issues. The solution lies with using the "DEFAULT BUTTON" and "DEFAULT FOCUS" property of the <FORM> element in a web_page and also using the TabIndex property of any WebControl.
<form id="form1" runat="server" defaultbutton="Button1" defaultfocus="TextBox1">
-- Above code-snippet will ensure that when the web-page loads "TextBox1" receives the focus by default among many of the textboxes on the web-page.
-- Also, "TabIndex" is a property available on any server side control which will accept non-negative integers and will shift the focus to the next control with incremental value of "TabIndex". This solves the issue of transfering the focus to the next control from first control by pressing "Tab" key.
<asp:TextBox ID="TextBox1" Text="Focus1" runat="server" TabIndex="1">
<asp:TextBox ID="TextBox2" Text="Focus2" runat="server" TabIndex="2">
<asp:TextBox ID="TextBox3" Text="Focus3" runat="server" TabIndex="3">
<asp:TextBox ID="TextBox4" Text="Focus4" runat="server" TabIndex="4">
As shown in the code above once the "TextBox1" has received the Focus because of defaultfocus attribute set to the form element of the web-page, next, specifying the TabIndex property of all the rest of the controls in an incremental approach ensure that the next textbox (with least incremented TabIndex value receives the focus)
Using the code
THIS CODE CAN BE USED AS IT IS AND IS VERY STRAIGHTFORWARD AND SIMPLE TO UNDERSTAND.
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server" defaultbutton="Button1" defaultfocus="TextBox1">
<div>
<asp:TextBox ID="TextBox1" Text="Focus1" runat="server" TabIndex="1"></asp:TextBox>
<asp:TextBox ID="TextBox2" Text="Focus2" runat="server" TabIndex="2"></asp:TextBox>
<asp:TextBox ID="TextBox3" Text="Focus3" runat="server" TabIndex="3"></asp:TextBox>
<asp:TextBox ID="TextBox4" Text="Focus4" runat="server" TabIndex="4"></asp:TextBox>
<asp:Button runat="server" ID="Button1" Text="DefaultClick-IfPressed-EnterKey" OnClick="DefaultButtonClicked"/>
<asp:Button runat="server" ID="Button2" Text="ClickExplicitly" OnClick="ExplicitlyClicked"/>
</div>
</form>
</body>
</html>
Points of Interest
1.)We learnt some simple things like setting a focus to a control on a web-page among a group of controls can simply be achieved with a property named defaultfocus of the "form" element of the web-page.
2.)We also learnt that making a button-control's event handler to be a default event handler for a situation when an "ENTER" key is pressed can be achieved by setting the defaultbutton property of the "form" element.
3.) Moving the focus to other controls when "Tab" key is pressed can be achieved by simply specifying the "TabIndex" property of these controls in an incremental way. PleaseNote: "TabIndex" property will accept non-negative numbers and will keep shifting the focus on the controls in an incremental manner as the "TabIndex" is assigned the numeric value.
Jitendra is a software developer, who believes, trouble-shooting skills are as important as the coding skills. He also believes that apart from technical skills a person should possess some Project Execution Skills as well to complete a project very successfully.
General 
News 
Suggestion 
Question 
Bug 
Answer 
Joke 
Praise 
Rant 
Admin 
Submit an article or tip
