control next object navigation

[tshad]

Is there an easy way to control navigation from one textbox to another?

I have 3 textboxes that happen to be in the same cell, but they are on the
page vertically. There are 4 cells next to each other this way.

When you tab, it goes to the textbox below it (unless it is the last box,
then it goes the top textbox in the next cell). I want it to go to the cell
on the right (not below it).

Is there a way to tell it to not use the default and tell it which box to go
to?

Thanks,

Tom.

 

[jfujino]

Set the TabIndex property of your textBox controls from 1 - 3 in the
order that you want the tabbing focus to go.

Sincerely,
James Fujino

 

[tshad]

Set the TabIndex property of your textBox controls from 1 - 3 in the
order that you want the tabbing focus to go.

I tried that and it doesn't seem to work.

When I look at the ViewSource, there doesn't seem to be anything there on
the textboxes to indicate that they are supposed to tab to a different box
than normal.

Here is the code:

<td width="61" valign="bottom">Name:<br>
<asp:textbox id="ReferenceName1" TextMode="SingleLine" Columns="11"
TabIndex="0" runat="server" /><br>
<asp:textbox id="ReferenceName2" TextMode="SingleLine" Columns="11"
TabIndex="4" runat="server" /><br>
<asp:TextBox ID="ReferenceName3" TextMode="SingleLine" Columns="11"
TabIndex="8" runat="server" /><br>
<asp:textbox id="ReferenceName4" TextMode="SingleLine" Columns="11"
TabIndex="12" runat="server" /><br>
<asp:TextBox ID="ReferenceName5" TextMode="SingleLine" Columns="11"
TabIndex="16" runat="server" />
</td>
<td width="107" valign="bottom">Address:<br>
<asp:textbox id="ReferenceAddress1" TextMode="SingleLine"
Columns="20" TabIndex="1" runat="server" /><br>
<asp:textbox id="ReferenceAddress2" TextMode="SingleLine"
Columns="20" TabIndex="5" runat="server" /><br>
<asp:TextBox ID="ReferenceAddress3" TextMode="SingleLine"
Columns="20" TabIndex="9" runat="server" /><br>
<asp:textbox id="ReferenceAddress4" TextMode="SingleLine"
Columns="20" TabIndex="13" runat="server" /><br>
<asp:TextBox ID="ReferenceAddress5" TextMode="SingleLine"
Columns="20" TabIndex="17" runat="server" />
</td>
<td width="106" valign="bottom">Bus. Name:<br>
<asp:textbox id="ReferenceBusinessName1" TextMode="SingleLine"
Columns="20" TabIndex="2" runat="server" /><br>
<asp:textbox id="ReferenceBusinessName2" TextMode="SingleLine"
Columns="20" TabIndex="6" runat="server" /><br>
<asp:TextBox ID="ReferenceBusinessName3" TextMode="SingleLine"
Columns="20" TabIndex="10" runat="server" /><br>
<asp:textbox id="ReferenceBusinessName4" TextMode="SingleLine"
Columns="20" TabIndex="14" runat="server" /><br>
<asp:TextBox ID="ReferenceBusinessName5" TextMode="SingleLine"
Columns="20" TabIndex="18" runat="server" />
</td>
<td width="172" valign="bottom">Phone #:<br>
<asp:textbox id="ReferencePhone1" TextMode="SingleLine" Columns="11"
TabIndex="3" runat="server" />
<asp:Label ID="ReferenceUnique1" Visible="false" runat="server"
/><br>
<asp:textbox id="ReferencePhone2" TextMode="SingleLine" Columns="11"
TabIndex="7" runat="server" />
<asp:Label ID="ReferenceUnique2" Visible="false" runat="server"
/><br>
<asp:TextBox ID="ReferencePhone3" TextMode="SingleLine" Columns="11"
TabIndex="11" runat="server" />
<asp:Label ID="ReferenceUnique3" Visible="false" runat="server"
/><br>
<asp:textbox id="ReferencePhone4" TextMode="SingleLine" Columns="11"
TabIndex="15" runat="server" />
<asp:Label ID="ReferenceUnique4" Visible="false" runat="server"
/><br>
<asp:TextBox ID="ReferencePhone5" TextMode="SingleLine" Columns="11"
TabIndex="19" runat="server" />
<asp:Label ID="ReferenceUnique5" Visible="false" runat="server" />
</td>

Is there something else I am supposed to set for this to work?

Thanks,

Tom

 

[jfujino]

Notice the TabIndex attribute in the source you pasted. The number
value of this attribute is what the browser will use to figure out the
tab order.

If you leave the property TabIndex of the TextBox controls in the
Visual Studio designer blank, when the page renders ASP will just put
in the TabIndex for you in the order that the controls render on the
page.

You need to explicitly place a number in the TabIndex property of the
TextBox controls in the order that you want the controls to tab. Click
on the TextBox you want to set the tabIndex in Visual Studio and look
for the tabIndex Property in the properties window. There's not much
else to it. Hope this is clear enough.

Have a great day.

Sincerely,
James Fujino

 

[tshad]

Notice the TabIndex attribute in the source you pasted. The number
value of this attribute is what the browser will use to figure out the
tab order.

If you leave the property TabIndex of the TextBox controls in the
Visual Studio designer blank, when the page renders ASP will just put
in the TabIndex for you in the order that the controls render on the
page.

You need to explicitly place a number in the TabIndex property of the
TextBox controls in the order that you want the controls to tab. Click
on the TextBox you want to set the tabIndex in Visual Studio and look
for the tabIndex Property in the properties window. There's not much
else to it. Hope this is clear enough.

Isn't that what I did?

Also, I am not using Visual Studio and am just placing this in my .aspx
page. Could this be a problem? Is there something else that VS is doing
that I am not.

Also, I am not putting the number in all the boxes on my screen (there are
quite a few of them) - just these. Is that causing the problem?

Thanks,

Tom

 

[tshad]

An interesting thing I noticed about tabbing if I just created a small page
with 5 boxes on it is that if you have all 5 out of order where the first
box is 0, it will go from the 1st box to the URL Address line, to the Page,
then to the TabIndex 1.
***************************************************************************************************
<%@ Page Language="VB" trace="false" debug="true" ContentType="text/html"
ResponseEncoding="iso-8859-1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>:: Staffing Workshop ::</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<script runat="server">

</script>
<link href="../css/staffing.css" rel="stylesheet" type="text/css">

<link href="css/staffing.css" rel="stylesheet" type="text/css">
</head>
<body id="myBody" runat="server">
<form method="post" name="form1" class="BodyText" runat="server">
<asp:TextBox ID="TextBox1" tabindex="0" runat="server" />
<p>
<asp:TextBox ID="TextBox2" tabindex="2" runat="server" /> </p>
<p>
<asp:TextBox ID="TextBox3" tabindex="1" runat="server" /> </p>
<p>
<asp:TextBox ID="TextBox4" tabindex="4" runat="server" /> </p>
<p>
<asp:TextBox ID="TextBox5" tabindex="3" runat="server" /> </p>
</form>
</body>
</html>
******************************************************************************************

If I change the boxes to look like this (where the 1st box is 1 instead of
0), it will not go to the URL line and will follow the tabs.
*********************************************************************************************
<asp:TextBox ID="TextBox1" tabindex="1" runat="server" />
<p>
<asp:TextBox ID="TextBox2" tabindex="2" runat="server" /> </p>
<p>
<asp:TextBox ID="TextBox3" tabindex="5 runat="server" /> </p>
<p>
<asp:TextBox ID="TextBox4" tabindex="4" runat="server" /> </p>
<p>
<asp:TextBox ID="TextBox5" tabindex="3" runat="server" /> </p>

*********************************************************************************************

If I take the tabindex out of the first 2 and start at the 1st box, it will
do the 1st box, go to the URL Line, the Page and then the 2nd box and follow
as expected.
************************************************************************
<asp:TextBox ID="TextBox1" runat="server" />
<p>
<asp:TextBox ID="TextBox2" runat="server" /> </p>
<p>
<asp:TextBox ID="TextBox3" tabindex="1" runat="server" /> </p>
<p>
<asp:TextBox ID="TextBox4" tabindex="3" runat="server" /> </p>
<p>
<asp:TextBox ID="TextBox5" tabindex="2" runat="server" /> </p>
**************************************************************************

Setting the tabindexs on all the boxes and radio buttons would be a chore as
depending on input and database reads some of the objects won't be there.

Tom

 

[jfujino]

The order that the browser interprets tabindexs is by first looking for
the lowest positive tabindex. So in the example above its 1. Then it
looks for the next number greater than it and so forth.

When it hits the greatest number it loops though the controls that
don't have a tabindex or have a tabindex of 0. So if you don't want to
place tab indexes for all your controls as long as the controls that
don't have tab indexes are in order then you should be ok.

Sincererly,
James Fujino

 

[jfujino]

The low down on Tabindex can be found here.
http://www.w3.org/TR/REC-html40/interact/forms.html#adef-tabindex

 

[jfujino]

BTW VS doesn't do anything special in regards to tabIndex, to answer
your side questions.
James