Support us .Net Basics C# SQL ASP.NET ADO.NET MVC Slides C# Programs Subscribe Buy DVD

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.

javascript automatically tab to next field

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"
<asp:TextBox ID="txt2" runat="server" Width="50px" MaxLength="4"
<asp:TextBox ID="txt3" runat="server" Width="50px" MaxLength="4"
<asp:TextBox ID="txt4" runat="server" Width="50px" MaxLength="4">

<script type="text/javascript">
    function moveCursor(fromTextBox, toTextBox)
        var length = fromTextBox.value.length;
        var maxLength = fromTextBox.getAttribute("maxLength");

        if (length == maxLength)

JavaScript with ASP.NET tutorial

1 comment:

  1. Dear sir now days industry more demand jqueary I request you sir up lode some vedio related to jqueary


If you like this website, please share with your friends on facebook and Google+ and recommend us on google using the g+1 button on the top right hand corner.