Link for all dot net and sql server video tutorial playlists
Link for slides, code samples and text version of the video
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]
