JavaScript to automatically tab to next textbox

Suggested Videos
Part 5 - ASP.NET TextBox and JavaScript
Part 6 - Watermark in ASP.NET TextBox using JavaScript
Part 7 - Disable ASP.NET button after click to prevent double clicking



In this video we will discuss, how to automatically move the cursor from one textbox to another using JavaScript. Let us understand this with an example.



Consider a web page where we need to enter 16 digit bank card number. On this page we have 4 textboxes. Each textbox should allow only 4 numbers. Upon entering the first 4 card numbers in the first textbox, the cursor should automatically move to the second textbox. Upon entering the next 4 card numbers in the second textbox, the cursor should automatically move to the third textbox.



Here is the HTML and JavaScript function that automatically sets the focus to the next textbox

Card Number :

<asp:TextBox ID="txt1" runat="server" Width="50px" MaxLength="4"

                onkeyup="moveCursor(this,'txt2')"></asp:TextBox>

<asp:TextBox ID="txt2" runat="server" Width="50px" MaxLength="4"

                onkeyup="moveCursor(this,'txt3')"></asp:TextBox>

<asp:TextBox ID="txt3" runat="server" Width="50px" MaxLength="4"

                onkeyup="moveCursor(this,'txt4')"></asp:TextBox>

<asp:TextBox ID="txt4" runat="server" Width="50px" MaxLength="4">

                </asp:TextBox>

<script type="text/javascript">

    function moveCursor(fromTextBox, toTextBox)

    {

        var length = fromTextBox.value.length;

        var maxLength = fromTextBox.getAttribute("maxLength");

        if (length == maxLength)

        {

            document.getElementById(toTextBox).focus();

        }

    }

</script>