JavaScript to automatically tab to next textbox

Link for all dot net and sql server video tutorial playlists

Link for slides, code samples and text version of the video

Healthy diet is very important both for the body and mind. If you like Aarvi Kitchen recipes, please support by sharing, subscribing and liking our YouTube channel. Hope you can help.

In this video we will discuss, how to automatically move the cursor keyboard focus 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 ID="txt2" runat="server" Width="50px" MaxLength="4"
onkeyup="moveCursor(this, 'txt3')" /]
[asp:TextBox ID="txt3" runat="server" Width="50px" MaxLength="4"
onkeyup="moveCursor(this, 'txt4')" /]
[asp:TextBox ID="txt4" runat="server" Width="50px" MaxLength="4" /]

[script type="text/javascript"]
function moveCursor(fromTextBox, toTextBox)
{
// Get the count of characters in fromTextBox
// Get the value of maxLength attribute from the fromTextBox
if (length == maxLength)
{
// If the number of charactes typed in the fromText is
// equal to the maxLength attribute then set focus on
// the next textbox
}
}
[/script]

[pablovarela-germa]

Thank you. Very clear. Cheers from Argentina.

[geld]

what if i want to delete the input hitting back space, how would i go back to the previous input field without manually clicking on previous input?

[pctutorialhelp]

Can we move cursor from fast tab to 6th tab with only one press in Tab Button? Please suggest me.

[yasirujayashan]

ambooo oya nam deiyek nevi devalayak :)

[jaysingrajput]

Sir I want First two text box and then table in teble dynamically insert multi data