Notice: This website is an unofficial Microsoft Knowledge Base (hereinafter KB) archive and is intended to provide a reliable access to deleted content from Microsoft KB. All KB articles are owned by Microsoft Corporation. Read full disclaimer for more details.

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


View products that this article applies to.

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:
  1. Start Visual Studio 2005 or Visual Studio .NET.
  2. Create a new ASP.NET Web Application project in Visual Basic .NET or in Visual Basic 2005, and then name it ClientSideScriptExample.
  3. Switch to the HTML view of the WebForm1.aspx window.
  4. 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()">
    					
  5. 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>
    					
  6. Click Save.
  7. 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.
  8. Click the InputBox 1 button and the focus moves to the txtInput1 control. Click the InputBox 2 button. Focus moves to the txtInput2 control.
  9. Close the browser.

Verification

  1. Click the InputBox 1 button to shift focus to the txtInput1 control.
  2. 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:

↑ Back to the top


Keywords: KB316719, kbhowtomaster, kbvs2005applies, kbvs2005swept

↑ Back to the top

Article Info
Article ID : 316719
Revision : 15
Created on : 5/21/2007
Published on : 5/21/2007
Exists online : False
Views : 533