Skip to content

Commit b36ea52

Browse files
ish-101ish-101
committed
README
1 parent 1def88f commit b36ea52

3 files changed

Lines changed: 122 additions & 3 deletions

File tree

‎README.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,9 +18,9 @@ Since both these features LIVE, this software __assists__ the user while filling
1818
```html
1919
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
2020
```
21-
2. Download and link jquery.serialnumber.js to the head of the page
21+
2. Download and link jquery.serialnumberinput.js to the head of the page
2222
```html
23-
<script type="text/javascript" src="jquery.serialnumber.js"></script>
23+
<script type="text/javascript" src="jquery.serialnumberinput.js"></script>
2424
```
2525
3. Add this script anywhere on the page. Configure it according to your needs.
2626
```html

‎demo/index.html‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,15 @@
33
<head>
44
<title>HTML Input Type SerialNumber - Demo</title>
55
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
6-
<script type="text/javascript" src="../src/jquery.serialnumber.js"></script>
6+
<script type="text/javascript" src="../src/jquery.serialnumberinput.js"></script>
77
</head>
88
<body>
9+
<h1>HTML-Input-Type-SerialNumber</h1>
10+
<hr>
11+
<h2>Demo</h2>
12+
<hr>
913
<p>Enter a Serial Number in the format <b>12-34\AB-CD</b></p>
14+
<p style="color: red;">Anything else would lead to deletion of the entered character.</p>
1015
<input type="serialnumber">
1116
<script type="text/javascript">
1217
$("input[type='serialnumber']").serialnumberinput(

‎src/jquery.serialnumberinput.js‎

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
/*
2+
HTML Input Type SerialNumber
3+
GitHub: https://github.com/ish-101/HTML-Input-Type-SerialNumber
4+
Dependency: jQuery 3.x.x
5+
License: GNU GENERAL PUBLIC LICENSE Version 3
6+
7+
Made by Ishpreet Singh Bhasin (ish-101)
8+
Website: http://ishpreet.tech/
9+
*/
10+
11+
(function($)
12+
{
13+
$.fn.serialnumberinput = function(user_options)
14+
{
15+
var target = this;
16+
var options = $.extend(
17+
{
18+
"separator": "",
19+
"pieces":
20+
[
21+
],
22+
}, user_options, this.data());
23+
var digits = [];
24+
var counter = -1;
25+
$.each(options.pieces, function(i)
26+
{
27+
if (this.type === "separator")
28+
{
29+
if (this.separator === undefined)
30+
{
31+
this.separator = options.separator;
32+
}
33+
this.length = 1;
34+
}
35+
else
36+
{
37+
this.type = "character";
38+
if (this.length === undefined)
39+
{
40+
this.length = 1;
41+
}
42+
}
43+
this.length = Number(this.length);
44+
this.length = Math.max(this.length, 0);
45+
46+
for (var j = 0; j < this.length; j++)
47+
{
48+
digits[counter + j + 1] = i;
49+
}
50+
counter += this.length;
51+
});
52+
target.attr(
53+
{
54+
'minlength': digits.length,
55+
'maxlength': digits.length,
56+
});
57+
function main(key)
58+
{
59+
var x = target.val().split("");
60+
var correct;
61+
var recur = false;
62+
if (x.length <= digits.length)
63+
{
64+
for (var i = 0; i < x.length; i++)
65+
{
66+
var regex_string;
67+
if (options.pieces[digits[i]].type === "character")
68+
{
69+
regex_string = options.pieces[digits[i]].pattern;
70+
}
71+
if (options.pieces[digits[i]].type === "separator")
72+
{
73+
regex_string = "[\\" + options.pieces[digits[i]].separator + "]";
74+
}
75+
correct = RegExp(regex_string).test(x[i]);
76+
if (!correct)
77+
{
78+
correct = (options.pieces[digits[i]].type === "separator");
79+
if (correct)
80+
{
81+
x[i+1] = x[i];
82+
x[i] = options.pieces[digits[i]].separator;
83+
recur = true;
84+
}
85+
else
86+
{
87+
break;
88+
}
89+
}
90+
}
91+
var y = x.join("");
92+
if (!correct)
93+
{
94+
y = y.substring(0,i);
95+
}
96+
if ((x.length < digits.length) && ((key !== undefined) && ((key !== "Backspace") && (key !== "Delete"))) && (options.pieces[digits[x.length]].type === "separator"))
97+
{
98+
y += options.pieces[digits[x.length]].separator;
99+
main();
100+
}
101+
target.val(y);
102+
if (recur)
103+
{
104+
main();
105+
}
106+
}
107+
}
108+
target.on('keyup', function(e)
109+
{
110+
main(e.key);
111+
});
112+
return;
113+
};
114+
}(jQuery));

0 commit comments

Comments
 (0)