How to set focus to Web Form controls by using client-side script (316719)

SUMMARY

This article demonstrates how to set focus to an ASP.NET Web Form control by using client-side script.

ASP.NET Web Form controls provide a similar look and feel of the traditional HTML controls while they provide a consistent and structured interface and more robust features. In addition, you can use client-side scripting to enhance the functionality that these controls provide.

Requirements

The following list outlines the recommended hardware, software, network infrastructure, and service packs that you need:

Microsoft Visual Studio 2005 or Microsoft Visual Studio .NET
Microsoft Internet Information Services (IIS) 5.0 or a later version of IIS

This article assumes that you are familiar with the following topics:

Web applications
ASP.NET
Visual Basic 2005 or Visual Basic .NET

Using client-side script in Visual Studio 2005 or in Visual Studio .NET

ASP.NET Web Form controls offer the appearance and functionality of the traditional HTML controls by generating the HTML elements on the client browser when the page is loaded. But unlike the HTML counterparts, ASP.NET Web Form controls provide a consistent and structured interface and more features, such as automatic postback, and the ability to generate multiple HTML elements from a single control. You can also use client-side scripting with these controls to provide additional functionality, such as setting the focus on an ASP.NET Web Form control.

The following procedure creates an ASP.NET Web application that displays three ASP.NET TextBox controls with the corresponding CommandButton controls for setting their focus. These CommandButton controls invoke client-side JavaScript to dynamically set focus on a specified server-side control:

Start Visual Studio 2005 or Visual Studio .NET.
Create a new ASP.NET Web Application project in Visual Basic .NET or in Visual Basic 2005, and then name it ClientSideScriptExample.
Switch to the HTML view of the WebForm1.aspx window.

In WebForm1's HTML window, copy and paste the following code between the opening and closing form tags. It displays the two TextBox controls with the corresponding command buttons:

Note When you paste the code into the HTML window, it is important to paste the code segments as HTML. To do this, click the Paste as HTML command on the context menu.

                          InputBox 1:
			<asp:TextBox ID="txtInput1" Runat="server" Width="50" />
			<br>
			InputBox 2:
			<asp:TextBox ID="txtInput2" Runat="server" Width="50" />
			<br>
			<br>
			Click a button to set focus on the specified control:<br>
			<input ID="cmdButton1" type="button" value="InputBox 1" 
OnClick="return cmdButton1_Clicked()">
<input ID="cmdButton2" type="button" value="InputBox 2" 
OnClick="return cmdButton2_Clicked()">

Copy and paste the following code into your page. Each command button invokes a client-side JavaScript function that sets focus on a particular control on the form. Be sure to position the code block before the first <BODY> tag:

<script language=javascript>
			function cmdButton1_Clicked()
			{	document.all('txtInput1').focus();
				return false;
			}
			
			function cmdButton2_Clicked()
			{	document.all('txtInput2').focus();
				return false;
}
</script>

Click Save.
On the Debug menu, click Start to build and run the application. WebForm1 is displayed on the screen. Two input boxes and two corresponding command buttons are displayed.
Click the InputBox 1 button and the focus moves to the txtInput1 control. Click the InputBox 2 button. Focus moves to the txtInput2 control.
Close the browser.

Verification

Click the InputBox 1 button to shift focus to the txtInput1 control.
Click the InputBox 2 button to shift focus to the txtInput2 control. This code should not cause a call to the server and should not reload the page.

Complete code listing

<%@ Page Language="vb" AutoEventWireup="false" Codebehind="WebForm1.aspx.vb" Inherits="ClientSideScriptExample.WebForm1"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
	<HEAD>
		<title>WebForm1</title>
		<meta name="GENERATOR" content="Microsoft Visual Studio.NET 7.0">
		<meta name="CODE_LANGUAGE" content="Visual Basic 7.0">
		<meta name="vs_defaultClientScript" content="JavaScript">
		<meta name="vs_targetSchema" 
content="http://schemas.microsoft.com/intellisense/ie5">
		<script language="javascript">
			function cmdButton1_Clicked()
			{	document.all('txtInput1').focus();
				return false;
			}
			
			function cmdButton2_Clicked()
			{	document.all('txtInput2').focus();
				return false;
			}
		</script>
	</HEAD>
	<body MS_POSITIONING="GridLayout">
		<form id="Form1" method="post" runat="server">
			InputBox 1:
			<asp:TextBox ID="txtInput1" Runat="server" Width="50" />
			<br>
			InputBox 2:
			<asp:TextBox ID="txtInput2" Runat="server" Width="50" />
			<br>
			<br>
			Click a button to set focus on the specified control:<br>
			<input ID="cmdButton1" type="button" value="InputBox 1" 
OnClick="return cmdButton1_Clicked()">
			<input ID="cmdButton2" type="button" value="InputBox 2" 
OnClick="return cmdButton2_Clicked()">
		</form>
	</body>
</HTML>

REFERENCES

For additional resources, visit the following Microsoft Web sites:

TextBox Web Server Control
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpgenref/html/cpconTextBoxWebServerControl.asp

Focus Method
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/methods/focus.asp

Code Blocks
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/cpguide/html/cpconcodeblocks.asp