Multi Text Box Input – jQuery Plugin

Here is a complete settings example for the Multi Text Box Input jQuery Plugin:

Height

You can set the height of the multi text box input using the height setting. For example:

$('#multi-text-box').multiTextBoxInput({
  height: 200
});

This will set the height of the multi text box input to 200 pixels.

Width

You can set the width of the multi text box input using the width setting. For example:

$('#multi-text-box').multiTextBoxInput({
  width: 400
});

This will set the width of the multi text box input to 400 pixels.

Max Items

You can set the maximum number of items that can be added to the multi text box input using the maxItems setting. For example:

$('#multi-text-box').multiTextBoxInput({
  maxItems: 5
});

This will set the maximum number of items that can be added to the multi text box input to 5.

Placeholder

You can set a placeholder text for the multi text box input using the placeholder setting. For example:

$('#multi-text-box').multiTextBoxInput({
  placeholder: 'Enter a value'
});

This will set the placeholder text for the multi text box input to "Enter a value".

Delimiter

You can set the delimiter character used to separate the items in the multi text box input using the delimiter setting. For example:

$('#multi-text-box').multiTextBoxInput({
  delimiter: ','
});

This will set the delimiter character to ",".

Add Button Text

You can set the text for the add button using the addButtonText setting. For example:

$('#multi-text-box').multiTextBoxInput({
  addButtonText: 'Add'
});

This will set the text for the add button to "Add".

Remove Button Text

You can set the text for the remove button using the removeButtonText setting. For example:

$('#multi-text-box').multiTextBoxInput({
  removeButtonText: 'Remove'
});

This will set the text for the remove button to "Remove".

Initial Values

You can set the initial values for the multi text box input using the initialValues setting. For example:

$('#multi-text-box').multiTextBoxInput({
  initialValues: ['Value 1', 'Value 2']
});

This will set the initial values for the multi text box input to "Value 1" and "Value 2".

Validation

You can set the validation rules for the multi text box input using the validation setting. For example:

$('#multi-text-box').multiTextBoxInput({
  validation: {
    required: true,
    pattern: /^[a-zA-Z0-9]+$/
  }
});

This will set the validation rules to require a value and only allow alphanumeric characters.

Custom Class

You can set a custom class for the multi text box input using the customClass setting. For example:

$('#multi-text-box').multiTextBoxInput({
  customClass: 'my-class'
});

This will set the custom class for the multi text box input to "my-class".

Here are the features of Multi Text Box Input - jQuery Plugin:

1. Displays multiple text boxes for single input: The plugin displays multiple text boxes that can be used for inputting values such as serial numbers, SSNs, IP addresses, phone numbers, and more.
2. Can be used for serial number, ssn, phone number, or other similar inputs: The plugin can be used for various types of input that require multiple parts or sections.
3. Input can be restricted to numbers: The plugin can be configured to restrict the input to numbers only.
4. Input can be restricted to letters: The plugin can be configured to restrict the input to letters only.
5. Input can be restricted to alpha-numeric values: The plugin can be configured to restrict the input to alpha-numeric values only.
6. 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)
7. Auto conversion to uppercase or lowercase characters as specified: The plugin can be configured to automatically convert the input to uppercase or lowercase characters.
8. Auto focuses next part/textbox after the required characters are entered: The plugin can be configured to automatically focus the next textbox after the required characters have been entered.
9. Auto focuses previous part/textbox on backspace: The plugin can be configured to automatically focus the previous textbox when the user presses the backspace key.
10. Can specify the number of text boxes to be displayed along with a separator: The plugin can be configured to display a separator between each textbox.
11. Hint can also be displayed to the right of textboxes: The plugin can be configured to display a hint or label to the right of the text boxes.
12. Examples have been provided: The plugin comes with examples of how to use it.
13. Properties include:
    • Value: The text that is displayed in the text boxes.
    • Input count: The number of text boxes to be displayed.
    • Separator: The separator for each part of the input.
    • Hint: A label that is displayed to the right of the text boxes.
    • Hint CSS class: The CSS class for the hint.
    • Input lengths: Comma-separated lengths for the text boxes.
    • CSS classes: Comma-separated CSS classes for the text boxes.
    • Char case: The case of the characters (none/uppercase/lowercase).
    • Input type: The input type of the text boxes (none/alphabetic/numeric/alphanumeric).
    • Allow decimal point: Whether decimal points should be allowed for numeric input type.
    • Allow space for alphabetic type: Whether white spaces should be allowed for alphabetic and alpha-numeric input types.
14. Methods include:
    • Value(): Retrieves the text of the text boxes.
    • Vlaue(value): Sets the text of the text boxes.
    • is Empty(): Determines whether all text boxes are empty or contain only white spaces.
    • is Input complete (ignore white space): Determines whether values have been entered with the required length in all text boxes.
15. More Useful Items:
    • PHP Code Generator
    • C# Code Generator for SQL Server/MS Access
    • C# Code Generator for MySQL
    • C# and VB.Net Code Generator for Entity Framework
    • Email Scheduler and Bulk Email Sender with Bootstrap
    • Android SMS Filter with Material Design
    • MultiTextBoxInput Web Server Control