No matter what flavor of ASP.NET you used (WebForms, MVC, WebMatrix) you probably are (or will be) doing more client side work.  

This is new to many developers, especially ASP.NET WebForms developers who have relied on Server-Side Controls for the majority of their UI rendering.  

As we move more logic to the browser, we require detailed manipulation of the client UI. One of the questions I get is ….. 

How do I put the cursor in a specific textbox ? 

This is useually refered to as setting focus. 

Consider the ASP.NET Page markup below…..  


<%@ Page Language="VB" AutoEventWireup="false"
CodeFile="Default.aspx.vb" 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>Set Focus</title>

<script type="text/javascript">
onload = function () {
document.getElementById("Text8").focus();
document.getElementById("Text8").value = "Enter Me First.";
document.getElementById("ASPTextBox8").focus();
document.getElementById("ASPTextBox8").value = "Enter Me First.";
    }

function SetMiddleTop() {
var txt = document.getElementById("Text2");
txt.focus();
txt.style.background = "pink";
    }

function ASPSetMiddleTop() {
var txt = document.getElementById("ASPTextBox2");
txt.focus();
txt.style.background = "pink";
    }
</script>
<style type="text/css">
.auto-styletd {
	text-align: center;
}
</style>
</head>
<body>
<div style="text-align: center;">
<br />TextBox Focus with JavaScript<br /><br />
<form id="MainForm" method="post" style="width: 700px; 
                                         margin: 0 auto;" runat="server">
   <table style="width: 100%;">
	 <tr>
        <td class="auto-styletd">
		   <input id="Text1" style="width: 180px" type="text" />
		</td>
        <td class="auto-styletd">
           <input id="Text2" style="width: 180px" type="text" />
        </td>
        <td class="auto-styletd">
           <input id="Text3" style="width: 180px" type="text" />
        </td>
     </tr>
     <tr>
        <td class="auto-styletd">
           <input id="Text4" style="width: 180px" type="text" />
        </td>
        <td class="auto-styletd">
           <input id="Text5" style="width: 180px" type="text" />
        </td>
        <td class="auto-styletd">
           <input id="Text6" style="width: 180px" type="text" />
        </td>
     </tr>
     <tr>
        <td class="auto-styletd">
           <input id="Text7" style="width: 180px" type="text" />
        </td>
        <td class="auto-styletd">
           <input id="Text8" style="width: 180px" type="text" />
        </td>
        <td class="auto-styletd">
           <input id="Text9" style="width: 180px" type="text" />
        </td>
     </tr>
     <tr>
        <td class="auto-styletd">&amp;nbsp;</td>
        <td class="auto-styletd">
           <input name="ClickMe" type="button" value="Click Me" 
		          onclick="SetMiddleTop();" />
        </td>
        <td class="auto-styletd">&amp;nbsp;</td>
	 </tr>
   </table>
   <br /><br />
   <table style="width: 100%;">
     <tr>
<td class="auto-styletd">
<asp:TextBox ID="ASPTextBox1" runat="server" Width="180px"></asp:TextBox>
</td>
<td class="auto-styletd">
<asp:TextBox ID="ASPTextBox2" runat="server" Width="180px"></asp:TextBox>
</td>
<td class="auto-styletd">
<asp:TextBox ID="ASPTextBox3" runat="server" Width="180px"></asp:TextBox>
</td>
	 </tr>
	 <tr>
<td class="auto-styletd">
<asp:TextBox ID="ASPTextBox4" runat="server" Width="180px"></asp:TextBox>
</td>
<td class="auto-styletd">
<asp:TextBox ID="ASPTextBox5" runat="server" Width="180px"></asp:TextBox>
</td>
<td class="auto-styletd">
<asp:TextBox ID="ASPTextBox6" runat="server" Width="180px"></asp:TextBox>
</td>
	 </tr>
	 <tr>
<td class="auto-styletd">
<asp:TextBox ID="ASPTextBox7" runat="server" Width="180px"></asp:TextBox>
</td>
<td class="auto-styletd">
<asp:TextBox ID="ASPTextBox8" runat="server" Width="180px"></asp:TextBox>
</td>
<td class="auto-styletd">
<asp:TextBox ID="ASPTextBox9" runat="server" Width="180px"></asp:TextBox>
</td>
	 </tr>
   <tr>
<td class="auto-styletd">&amp;nbsp;</td>
<td class="auto-styletd">
<input name="ASPClickMe" type="button" value="Click Me"
onclick="ASPSetMiddleTop();" />
</td>
<td class="auto-styletd">&amp;nbsp;</td>
   </tr>
  </table>
</form>
</div>
</body>
</html>

  

Note first the onload() function, which is run when the page is loaded in the browser – that begins at line #10.  

Line #11 -  

   document.getElementById("Text8").focus();

 

Puts the cursor in HTML text element whose id is Text8 and the next line adds a bit of text.  

Though it’s perfectly reasonable to use HTML elements and colecthe use rentered values from the Request object when the form is submitted, most WebForms Developers use Server Side controls, but still want to manpulate them with Client Side Code.  

No Problem.  

Line #13 sents the focus for the ASP.NET TextBox whos id is “ASPTextBox8″  

document.getElementById("ASPTextBox8").focus();

 

When the page starts the curser is in “ASPTextBox8″ because that is the last elements that we set focus on.  

  

onload() is usefull, but we’ll also need to set focus at other times like on field validation or even manual (or conditional) form workflow. 

For this, we can create a JavaScript Function and wire/call that function in response to some client side event. 

In the code above above I create functions starting on lines #17 and #23 and then binf them to each of the button onclick events in the form. 

Note that in addition to setting the focus to the TextBox element that is associated with the cicked TexBox, I’m setting the background to pink as you might do to call attention to the field. 

 

Another thing to note is that this simpy works becuase this is a stand-alone  page.

If we were using MasterPages, BoundControls, or Containers we would probbaly have to set the ClientID mode to static.

I’ll blog some detail about ASP.NET 4′s Client ID Mode in a forthcoming post. If you’re using an earlier version of ASP.NET things are more difficult since we need to “find” the control via an auto generated Id.

ASP.NET is much more JavaScript friendly.