how to mask input in html as phone numbr

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;

1[data-slots] { font-family: monospace }

1ISO Date: <input type="text" value="____-__-__" data-mask="____-__-__"/><br/>
2Telephone: <input type="text" value="(___) ___-____" data-mask="(___) ___-____"/><br/>