Multi Text Box Input - jQuery Plugin

Need 50% Discount?

Download this bundle which is 50% OFF.

MultiTextBoxInput is a jQuery plugin that displays multiple textboxes for single input. It is used for serial number, SSN, IP address, phone number or other values that has multiple parts. It automatically focuses the next textbox as the required characters are entered. It also automatically focuses previous textbox on backspace. This control makes the input more beautiful, easier and readable.

A web server control is also available for the same purpose. Click here.

Video Demo:

Features:

• Displays multiple text boxes for single input.
• Can be used for serial number, ssn, phone number or other similar inputs.
• Input can be restricted to numbers.
• Input can be restricted to letters.
• Input can be restricted to apha numeric values.
• Width is automatically calculated based on the following parameters:
  • The number of characters
  • Input type (numeric characters take less space than alphabetic characters)
  • Uppercase/lowercase characters (lower case characters take less space than uppercase characters)
• Auto conversion to uppercase or lowercase characters as specified.
• Auto focuses next part/textbox after the required characters are entered.
• Auto focuses previous part/textbox on backspace.
• You can specify the number of textboxes to be displayed along with a separator.
• Hint can also be displayed to the right of textboxes.
• Examples have been provided.

Properties:

• value: The text that is displayed in the textboxes.
• inputCount: It is the number of text boxes to be displayed.
• separator: It is the separator for each part of the input.
• hint: It is a label that is displayed to the right of the text boxes.
• hintCssClass: It is the CSS class for hint.
• inputLengths: It is comma separated lengths for the text boxes.
• cssClasses: It is comma separated CSS classes for the text boxes.
• charCase: It is case of the characters (none/uppercase/lowercase).
• inputType: It is input type of the text boxes (none/alphabetic/numeric/alphanumeric).
• allowDecimalPoint: It indicates whether decimal point should be allowed for numeric input type.
• allowSpaceForAlphabeticType: It indicates whether white space should be allowed for alphabetic and alpha numeric input types.

Methods:

• value(): It gets text of the textboxes.
• vlaue(value): It sets text of the textboxes.
• isEmpty(): It determines whether all text boxes are empty or contain only white spaces.
• isInputComplete(ignoreWhiteSpace): It determines whether values have been entered with the required length in all text boxes.

More Useful Items:

1. PHP Code Generator
2. C# Code Generator for SQL Server/MS Access
3. C# Code Generator for MySQL
4. C# and VB.Net Code Generator for Entity Framework
5. Email Scheduler and Bulk Email Sender with Bootstrap
6. Android SMS Filter with Material Design
7. MultiTextBoxInput Web Server Control