Web Form: Automatically move the focus to next control

Web Forms

Part of my web form contains three textbox server controls into which the user enters a U.S. telephone number. The first textbox is for the 3-digit area code (tbAreaCode), the second textbox holds the 3-digit exchange (tbExchange), and the third textbox holds the last 4 digits of the phone number (tbNumber).  So the three controls on the form are arranged to look something like this:

Phone Number:   ( _ _ _ ) _ _ _ - _ _ _ _

I have set the MaxLength for each text box to either 3 or 4 to limit input to the appropriate number of digits. Once they type the last digit in a text box I want the focus to immediately move to the next textbox in the tab order.

I cannot find any method that looks like SetFocus or MoveNext. How do I do it? (If it requires JavaScript, please give me a complete answer as I do not know Javascript.)
Who is Participating?
David H.H.LeeConnect With a Mentor Commented:

Try this, use onKeyUp JS function to get it work.:

<%@ Page Language="vb" %>
<script runat="server">
    Sub Page_Load(ByVal sender As System.Object, ByVal e As System.EventArgs)
        'Put user code to initialize the page here
        'register javascript event
        txt1.Attributes.Add("onkeyup", "javascript:tabNext('txt1','txt2')")
        txt2.Attributes.Add("onkeyup", "javascript:tabNext('txt2','txt3')")
    End Sub
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
            <meta name="GENERATOR" content="Microsoft Visual Studio .NET 7.1">
            <meta name="CODE_LANGUAGE" content="Visual Basic .NET 7.1">
            <meta name="vs_defaultClientScript" content="JavaScript">
            <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
            <script language="javascript">
            function tabNext(obj,objNext)
      <body MS_POSITIONING="GridLayout">
            <form id="frmSubmit" method="post" runat="server">
                  Phone Number :
                  <asp:textbox id="txt1" runat="server" maxlength="3" columns="3"/>
                  -<asp:textbox id="txt2" runat="server" maxlength="3" columns="3"/>
                  -<asp:textbox id="txt3" runat="server" maxlength="4" columns="4"/>

rgrimmAuthor Commented:

Excellent! It worked great the first time. Thank you very much for taking the time to help me with this. I greatly appreciate it.


David H.H.LeeCommented:
Glad to help, rgrimm.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.