https://inel-shop.ru/local/templates/main/js/phoneMask.js

1function mask(input, mask, symbol)
2{
3	if(!symbol) symbol = "_";
4
5    if(!input.value) input.value = '';
6
7    if (input.value.length === 0)
8    {
9        input.setAttribute("value", mask);
10    }
11    else
12    {
13        input.setAttribute("value", input.value);
14    }
15
16	input.setAttribute("data-mask", mask);
17	input.setAttribute("type", "tel");
18	input.addEventListener("focus", setStartPos);
19	input.addEventListener("input", inputHandler);
20
21	var arReplacementPos = getReplacementPos();
22
23	function getReplacementPos() {
24		var res = [];
25		var innerMask = mask;
26		while (~innerMask.indexOf(symbol)) {
27			res.push(innerMask.indexOf(symbol) + 1);
28			innerMask = innerMask.replace(symbol, " ");
29		}
30		return res;
31	}
32
33	function setCursor(pos) {
34		setTimeout(function () {
35			input.setSelectionRange(pos, pos);
36		}, 10);
37	}
38
39
40	function inputHandler() {
41		var symbol = getNewSymbol();
42
43		var replacementPos = getNextReplacementPos();
44		if(symbol === symbol) {
45			removePrev();
46		} else if(isNaN(symbol)) {
47			input.value = input.getAttribute("value");
48			setCursor(replacementPos - 1);
49			return false;
50		} else {
51			replaceValue(symbol, replacementPos);
52		}
53
54	}
55
56	function getNewSymbol() {
57		var arNewValSymbols = input.value.split("");
58		var arOldValSymbols = input.getAttribute("value").split("");
59		if (arNewValSymbols.length < arOldValSymbols.length) {
60			return symbol;
61		}
62		for (var i = 0; i < arNewValSymbols.length; i++) {
63			if (arNewValSymbols[i] !== arOldValSymbols[i]) {
64				return arNewValSymbols[i];
65			}
66		}
67	}
68
69	function replaceValue(symbol, replacementPos) {
70		var value = input.getAttribute("value");
71		value = value.slice(0, replacementPos - 1) + symbol + value.slice(replacementPos);
72		if (value.length > mask.length) {
73			input.value = input.getAttribute("value");
74			return false;
75		}
76		input.value = value;
77		input.setAttribute("value", value);
78		setCursor(replacementPos);
79	}
80
81	function removePrev() {
82		var caretPos = getCaretPos() + 1;
83		while (!~arReplacementPos.indexOf(caretPos) && caretPos > 0) {
84			caretPos--;
85		}
86		if(caretPos === 0) {
87			input.value = input.getAttribute("value");
88			setCursor(arReplacementPos[0] - 1);
89			return false;
90		}
91		// данная строка стирала значение в инпуте при вводе с телефона
92		// replaceValue(symbol, caretPos);
93		setCursor(caretPos - 1);
94	}
95
96	function getCaretPos() {
97		return input.selectionStart;
98	}
99
100	function setStartPos() {
101		setCursor(0);
102		var replacementPos = getNextReplacementPos();
103		setCursor(replacementPos - 1);
104	}
105
106	function getNextReplacementPos() {
107		var caretPos = getCaretPos();
108		while (!~arReplacementPos.indexOf(caretPos) && caretPos < mask.length) {
109			caretPos++;
110		}
111		return caretPos;
112	}
113
114}