how to mask input in html as phone numbr

Solutions on MaxInterview for how to mask input in html as phone numbr by the best coders in the world

showing results for - "how to mask input in html as phone numbr"
Iggy
26 May 2019
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>
Mia
25 Aug 2019
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}
Elisa
08 Mar 2017
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});
Henry
28 Feb 2020
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;
Hélène
25 Apr 2016
1[data-slots] { font-family: monospace }
Alyssia
19 Jun 2016
1ISO Date: <input type="text" value="____-__-__" data-mask="____-__-__"/><br/>
2Telephone: <input type="text" value="(___) ___-____" data-mask="(___) ___-____"/><br/>