HTML Input Type SerialNumber
A widget that assists users while filling out HTML Input fields intended for Serial Numbers.
LIVE Pattern Matching and Auto Completion
It test for the Regular Expression separately on separate pieces of the input, instead of all at once. The invalid characters automatically get deleted.
Some Serial Numbers have separating characters, such as dashes, between the pieces. This input field automatically adds those separators wherever required.
Since both these features LIVE, this widget assists the user while filling out the Serial Number, instead of simply pointing out that it was incorrectly formatted.
- Link jQuery version 3.x.x to the head of the page (if not already linked)
- Download and link jquery.serialnumberinput.js to the head of the page
- Add this script anywhere on the page. Configure it according to your own needs.
- Use the input type
serialnumberanywhere in the page to test if it works.
separator:Defines the character which should be automatically added as a separator. (Default value is an empty string
separatorproperty can be defined for the whole input box in general, or specially for each separator. Specific definitions override the general ones.
pieces:This is an array of
length:A positive integer denoting the number of character in a piece. (Default value is
pattern:A Regular Expression which defines the allowed characters in a piece.
type:Should be set to
separatorto add a separator, or else, should not be set at all.
Made as a plugin to jQuery
Dependent on jQuery version 3.x.x
Ishpreet Singh Bhasin