|
1 | 1 | # HTML Input Type SerialNumber |
2 | 2 | A new type of HTML Input field which is specially built for Serial Numbers. It assists the user while filling out the input field LIVE. |
| 3 | + |
3 | 4 | ## _LIVE_ Pattern Matching and Auto Completion |
| 5 | + |
4 | 6 | ### Pattern Matching |
5 | 7 | It test for the Regular Expression separately on separate pieces of the input, instead of all at once. The invalid characters __automatically get deleted__. |
| 8 | + |
6 | 9 | ### Auto Completion |
7 | 10 | Some Serial Numbers have separating characters, such as dashes, between the pieces. This input field __automatically adds__ those separators wherever required. |
8 | 11 |
|
9 | 12 | Since both these features LIVE, this software __assists__ the user while filling out the Serial Number, instead of simply pointing out that it was wrong. |
| 13 | + |
10 | 14 | ## DEMO |
11 | | -<input type=serialnumber> |
| 15 | + |
12 | 16 | ## Installation |
13 | 17 | 1. Link jQuery version 3.x.x to the head of the page (if not already linked) |
14 | 18 | ```html |
@@ -59,7 +63,23 @@ Since both these features LIVE, this software __assists__ the user while filling |
59 | 63 | }); |
60 | 64 | </script> |
61 | 65 | ``` |
62 | | -4. Use the input type "serialnumber" anywhere in the page to test if it works. |
| 66 | +4. Use the input type `serialnumber` anywhere in the page to test if it works. |
63 | 67 | ```html |
64 | 68 | <input type="serialnumber"> |
65 | | -``` |
| 69 | +``` |
| 70 | + |
| 71 | +## Configuration |
| 72 | +__`separator:`__ This property can be defined for the whole input box in general, or specially for each separator. Specific definitions override the general ones. (Default value is an empty string `""`) |
| 73 | +__`pieces:`__ This is an array of the __`piece`__ objects. |
| 74 | +-------__`length:`__ A positive integer denoting the number of character in a piece. (Default value is `1`) |
| 75 | +-------__`pattern:`__ A [Regular Expression](https://www.w3schools.com/jsref/jsref_obj_regexp.asp) which defines the allowed characters in a piece. |
| 76 | +-------__`type:`__ Should be set to `separator` to add a separator, or else, should be left blank. |
| 77 | + |
| 78 | +## Information |
| 79 | +Made as a plugin for jQuery |
| 80 | +Dependent on jQuery version 3.x.x |
| 81 | + |
| 82 | +## Creator |
| 83 | +__Made By:__ _Ishpreet Singh Bhasin_ |
| 84 | +[__Website__](http://ishpreet.tech/) |
| 85 | +[__GitHub__](https://github.com/ish-101/) |
0 commit comments