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

"You guys are the best! Thank you, you're making our lives much more easier."

Bronida Tarutin

Random testimonial   All testimonials

obout.com
obout.com Home
News
Interface Controls Home 
Interface Controls Home
Download
Site Map
Examples - 55
Appearance - 2
Live Styles
Different Styles New
Common Features - 3
Width
Enable / Disable
Reset Values New
Button - 6
Default Button
PostBackUrl
Client-Side Events
Server-Side Events
Server-Side Commands
Client-Side Manipulation
Checkbox - 6 New
AutoPostBack
Linked CheckBoxes with Tri-States
Client-Side Events
Server-Side Events
Client-Side Manipulation
Linked Fields New
Dropdown List - 8
Height
MenuWidth
Multiple Rows and Columns New
AutoPostBack
Linked Fields New
Client-Side Events
Server-Side Events
Client-Side Manipulation
Image Button - 7
Enable specific states
Default Button
PostBackUrl
Client-Side Events
Server-Side Events
Server-Side Commands
Client-Side Manipulation
Radio Button - 5 New
AutoPostBack
GroupName
Client-Side Events
Server-Side Events
Client-Side Manipulation
Textbox - 11
Auto Complete
AutoPostBack New
MaxLength
MaxLength with Counter New
MaxLength with Auto Focus New
TextMode
WatermarkText
Linked Fields New
Client-Side Events
Server-Side Events
Client-Side Manipulation
Integration - 7
Cascading Dropdown Lists
With ASP.NET Validators
Inside Grid
Textbox with DatePicker
Inside User Controls New
Using ASP.NET Themes/Skins New
Create User Wizard New
Knowledge Base - 1
Knowledge Base
Documentation - 22
Server-Side
OboutButton
OboutButtonCssSettings
OboutCheckBox
OboutCheckBoxClientSideEvents
OboutCheckBoxCssSettings
OboutDropDownList
OboutDropDownListClientSideEvents
OboutDropDownListCssSettings
OboutImageButton
OboutRadioButton
OboutRadioButtonClientSideEvents
OboutRadioButtonCssSettings
OboutTextBox
OboutTextBoxClientSideEvents
OboutTextBoxCssSettings
Client-Side
OboutButton
OboutCheckBox
OboutDropDownList
OboutImageButton
OboutRadioButton
OboutTextBox
ChangeLog
Tutorials - 2
Configuration
Using the correct path
Appearance
Changing the font-size / height