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();
        }
    }
}

"We are a current owner of the Infragistics suite - but will be immediately purchasing your components as they are far and away better than anything I have seen out there. Great stuff! I can't believe I haven't come across your components before."

David Adams

NJS Enterprises, Inc.

Random testimonial All testimonials