1<label>Date time:
2 <input placeholder="dd/mm/yyyy hh:mm" data-slots="dmyh">
3</label><br>
4<label>Telephone:
5 <input placeholder="+1 (___) ___-____" data-slots="_">
6</label><br>
7<label>MAC Address:
8 <input placeholder="XX:XX:XX:XX:XX:XX" data-slots="X" data-accept="[\dA-H]">
9</label><br>
10<label>Alphanumeric:
11 <input placeholder="__-__-__-____" data-slots="_" data-accept="\w" size="13">
12</label><br>
13<label>Credit Card:
14 <input placeholder=".... .... .... ...." data-slots="." data-accept="\d" size="19">
15</label><br>
16<label>Alphanumeric:
17 <input placeholder="__-__-__-____" data-slots="_" data-accept="\w" size="13">
18</label><br>
1Array.prototype.forEach.call(document.body.querySelectorAll("*[data-mask]"), applyDataMask);
2
3function applyDataMask(field) {
4 var mask = field.dataset.mask.split('');
5
6 // For now, this just strips everything that's not a number
7 function stripMask(maskedData) {
8 function isDigit(char) {
9 return /\d/.test(char);
10 }
11 return maskedData.split('').filter(isDigit);
12 }
13
14 // Replace `_` characters with characters from `data`
15 function applyMask(data) {
16 return mask.map(function(char) {
17 if (char != '_') return char;
18 if (data.length == 0) return char;
19 return data.shift();
20 }).join('')
21 }
22
23 function reapplyMask(data) {
24 return applyMask(stripMask(data));
25 }
26
27 function changed() {
28 var oldStart = field.selectionStart;
29 var oldEnd = field.selectionEnd;
30
31 field.value = reapplyMask(field.value);
32
33 field.selectionStart = oldStart;
34 field.selectionEnd = oldEnd;
35 }
36
37 field.addEventListener('click', changed)
38 field.addEventListener('keyup', changed)
39}
1// This code empowers all input tags having a placeholder and data-slots attribute
2document.addEventListener('DOMContentLoaded', () => {
3 for (const el of document.querySelectorAll("[placeholder][data-slots]")) {
4 const pattern = el.getAttribute("placeholder"),
5 slots = new Set(el.dataset.slots || "_"),
6 prev = (j => Array.from(pattern, (c,i) => slots.has(c)? j=i+1: j))(0),
7 first = [...pattern].findIndex(c => slots.has(c)),
8 accept = new RegExp(el.dataset.accept || "\\d", "g"),
9 clean = input => {
10 input = input.match(accept) || [];
11 return Array.from(pattern, c =>
12 input[0] === c || slots.has(c) ? input.shift() || c : c
13 );
14 },
15 format = () => {
16 const [i, j] = [el.selectionStart, el.selectionEnd].map(i => {
17 i = clean(el.value.slice(0, i)).findIndex(c => slots.has(c));
18 return i<0? prev[prev.length-1]: back? prev[i-1] || first: i;
19 });
20 el.value = clean(el.value).join``;
21 el.setSelectionRange(i, j);
22 back = false;
23 };
24 let back = false;
25 el.addEventListener("keydown", (e) => back = e.key === "Backspace");
26 el.addEventListener("input", format);
27 el.addEventListener("focus", format);
28 el.addEventListener("blur", () => el.value === pattern && (el.value=""));
29 }
30});
1/**
2 * charCode [48,57] Numbers 0 to 9
3 * keyCode 46 "delete"
4 * keyCode 9 "tab"
5 * keyCode 13 "enter"
6 * keyCode 116 "F5"
7 * keyCode 8 "backscape"
8 * keyCode 37,38,39,40 Arrows
9 * keyCode 10 (LF)
10 */
11function validate_int(myEvento) {
12 if ((myEvento.charCode >= 48 && myEvento.charCode <= 57) || myEvento.keyCode == 9 || myEvento.keyCode == 10 || myEvento.keyCode == 13 || myEvento.keyCode == 8 || myEvento.keyCode == 116 || myEvento.keyCode == 46 || (myEvento.keyCode <= 40 && myEvento.keyCode >= 37)) {
13 dato = true;
14 } else {
15 dato = false;
16 }
17 return dato;
18}
19
20function phone_number_mask() {
21 var myMask = "(___) ___-____";
22 var myCaja = document.getElementById("phone");
23 var myText = "";
24 var myNumbers = [];
25 var myOutPut = ""
26 var theLastPos = 1;
27 myText = myCaja.value;
28 //get numbers
29 for (var i = 0; i < myText.length; i++) {
30 if (!isNaN(myText.charAt(i)) && myText.charAt(i) != " ") {
31 myNumbers.push(myText.charAt(i));
32 }
33 }
34 //write over mask
35 for (var j = 0; j < myMask.length; j++) {
36 if (myMask.charAt(j) == "_") { //replace "_" by a number
37 if (myNumbers.length == 0)
38 myOutPut = myOutPut + myMask.charAt(j);
39 else {
40 myOutPut = myOutPut + myNumbers.shift();
41 theLastPos = j + 1; //set caret position
42 }
43 } else {
44 myOutPut = myOutPut + myMask.charAt(j);
45 }
46 }
47 document.getElementById("phone").value = myOutPut;
48 document.getElementById("phone").setSelectionRange(theLastPos, theLastPos);
49}
50
51document.getElementById("phone").onkeypress = validate_int;
52document.getElementById("phone").onkeyup = phone_number_mask;
1ISO Date: <input type="text" value="____-__-__" data-mask="____-__-__"/><br/>
2Telephone: <input type="text" value="(___) ___-____" data-mask="(___) ___-____"/><br/>