Изменил код так, чтобы его можно было использовать на множестве инпутов(с разными настройками).
На странице несколько инпутов, для каждого зададим дата-атрибутом маску:
<input type="tel" name="tel1" placeholder="+38 (___) ___-__-__" data-mask="+38 (___) ___-__-__">
<input type="tel" name="tel2" placeholder="+7 ___ ___-____" data-mask="+7 ___ ___-____">
<input type="tel" name="tel3" placeholder="8 (___) ___-__-__" data-mask="8 (___) ___-__-__">
<input type="tel" name="tel4" placeholder="+380(___)___ __ __" data-mask="+380(___)___ __ __">
<input type="tel" name="tel5" placeholder="___-__-__" data-mask="___-__-__">
window.addEventListener('DOMContentLoaded', function() {
/* Инициализируем маски для каждого из них */
var inputs = document.querySelectorAll('input[type="tel"]');
Array.prototype.forEach.call(inputs, function(input) {
new InputMask({
selector: input,
layout: input.dataset.mask // читаем дата-атрибут, установленный в html и устанавливаем его значение в качестве маски
})
})
/*
Одиночный вызов может выглядеть так:
new InputMask({
selector: '#myInput',
layout: '+385(___) ___-__-__'
})
*/
})
function InputMask(options) {
this.el = this.getElement(options.selector);
if (!this.el) return console.log('Что-то не так с селектором');
this.layout = options.layout || '+_ (___) ___-__-__';
this.maskreg = this.getRegexp();
this.setListeners();
}
InputMask.prototype.getRegexp = function () {
var str = this.layout.replace(/_/g, '\\d');
str = str.replace(/\(/g, '\\(');
str = str.replace(/\)/g, '\\)');
str = str.replace(/\+/g, '\\+');
str = str.replace(/\s/g, '\\s');
return str;
};
InputMask.prototype.mask = function (e) {
var _this = e.target,
matrix = this.layout,
i = 0,
def = matrix.replace(/\D/g, ""),
val = _this.value.replace(/\D/g, "");
if (def.length >= val.length) val = def;
_this.value = matrix.replace(/./g, function (a) {
return /[_\d]/.test(a) && i < val.length ? val.charAt(i++) : i >= val.length ? "" : a;
});
if (e.type == "blur") {
var regexp = new RegExp(this.maskreg);
if (!regexp.test(_this.value)) _this.value = "";
} else {
this.setCursorPosition(_this.value.length, _this);
}
};
InputMask.prototype.setCursorPosition = function (pos, elem) {
elem.focus();
if (elem.setSelectionRange) elem.setSelectionRange(pos, pos);else if (elem.createTextRange) {
var range = elem.createTextRange();
range.collapse(true);
range.moveEnd("character", pos);
range.moveStart("character", pos);
range.select();
}
};
InputMask.prototype.setListeners = function () {
this.el.addEventListener("input", this.mask.bind(this), false);
this.el.addEventListener("focus", this.mask.bind(this), false);
this.el.addEventListener("blur", this.mask.bind(this), false);
};
InputMask.prototype.getElement = function (selector) {
if (selector === undefined) return false;
if (this.isElement(selector)) return selector;
if (typeof selector == 'string') {
var el = document.querySelector(selector);
if (this.isElement(el)) return el;
}
return false;
};
InputMask.prototype.isElement = function (element) {
return element instanceof Element || element instanceof HTMLDocument;
};
ссылка на jsfiddle:
https://jsfiddle.net/battlehater/0oaf16bv/