OBOUT - Free ASP.NET Interface Controls - Textbox

ASP.NET Interface Controls - Textbox - MaxLength with Auto Focus

Enter your credit card number:

This example showcases the use of the MaxLength feature of the OboutTextBox along with an auto tabbing mechanism. While the user types into the text boxes, when the maximum number of characters for a text box is reached, the focus will automatically be set to the next text box.

ASP.NET

<obout:OboutTextBox runat="server" ID="OboutTextBox1"  MaxLength="4">
    <ClientSideEvents  OnKeyPress="TextBox_KeyPress" OnKeyUp="TextBox_KeyPress"/>
</obout:OboutTextBox>
<obout:OboutTextBox runat="server" ID="OboutTextBox2"  MaxLength="4">
    <ClientSideEvents  OnKeyPress="TextBox_KeyPress" OnKeyUp="TextBox_KeyPress" />
</obout:OboutTextBox>
<obout:OboutTextBox runat="server" ID="OboutTextBox3"  MaxLength="4">
    <ClientSideEvents  OnKeyPress="TextBox_KeyPress" OnKeyUp="TextBox_KeyPress" />
</obout:OboutTextBox>
<obout:OboutTextBox runat="server" ID="OboutTextBox4"  MaxLength="4">
    <ClientSideEvents  OnKeyPress="TextBox_KeyPress" OnKeyUp="TextBox_KeyPress" />
</obout:OboutTextBox>

JavaScript

function TextBox_KeyPress(sender, key) {
    var index = parseInt(sender.ID.replace('OboutTextBox', ''));

    if (sender.value().length == 4 && index < 4) {
        var nextTextBox = eval('OboutTextBox' + (index + 1));
        if (nextTextBox) {
            nextTextBox.focus();
        }
    }
}