JavaScript to automatically tab to next textbox

Link for all dot net and sql server video tutorial playlists
/ kudvenkat
Link for slides, code samples and text version of the video
csharp-video-tu...
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 KZbin channel. Hope you can help.
/ @aarvikitchen5572
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
var length = fromTextBox.value.length;
// Get the value of maxLength attribute from the fromTextBox
var maxLength = fromTextBox.getAttribute("maxLength");
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
document.getElementById(toTextBox).focus();
}
}
[/script]

[@SushankB]

thanks a lot for the video it helped me a lot

[@pablovarela-germa259]

Thank you. Very clear. Cheers from Argentina.

[@geld5220]

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.

[@abhinavkumar8271]

Very good..

[@mahipalkamanchi]

thank u sir...!

[@jaysingrajput6835]

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

[@volodymyrkozliuk6811]

it was helpful

[@orcunozdil8227]

thanks a lot..

[@JediPhantom]

great stuff!..

[@yasirujayashan]

ambooo oya nam deiyek nevi devalayak :)

[@therock-m3k]

Tks

[@aleksejsaleksejevs7818]

(Y)