Переписал в ооп с возможностью настройки
Изменил код так, чтобы его можно было использовать на множестве инпутов(с разными настройками).
На странице несколько инпутов, для каждого зададим дата-атрибутом маску: <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/ |
Alexandr Battlehater,
:) |
Здравствуйте. Скажите пожалуйста, что нужно исправить в коде, для получения маски вида "+999 (___) ___ ____" если просто поправить маску, получается "+999 (" при начале заполнения. Как сделать так, чтобы скобка добавлялась не одновременно с первыми тремя цифрами?
И, можете объяснить, что нужно менять, чтобы, при изменении количества начальных цифр (например: +99; +9999) или формы маски (например: (__) ___ ____; (__) ___ __ __;) скобка появлялась не одновременно с первыми цифрами. Спасибо.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<input value="" class="tel">
<input value="" class="tel">
<input value="" class="tel" >
<script>
window.addEventListener("DOMContentLoaded", function() {
[].forEach.call( document.querySelectorAll('.tel'), function(input) {
var keyCode;
function mask(event) {
event.keyCode && (keyCode = event.keyCode);
var pos = this.selectionStart;
if (pos < 3) event.preventDefault();
var matrix = "+999 (__) ___ __ __",
i = 0,
def = matrix.replace(/\D/g, ""),
val = this.value.replace(/\D/g, ""),
new_value = matrix.replace(/[_\d]/g, function(a) {
return i < val.length ? val.charAt(i++) || def.charAt(i) : a
});
i = new_value.indexOf("_");
if (i != -1) {
i < 5 && (i = 3);
new_value = new_value.slice(0, i)
}
var reg = matrix.substr(0, this.value.length).replace(/_+/g,
function(a) {
return "\\d{1," + a.length + "}"
}).replace(/[+()]/g, "\\$&");
reg = new RegExp("^" + reg + "$");
if (!reg.test(this.value) || this.value.length < 5 || keyCode > 47 && keyCode < 58) this.value = new_value;
if (event.type == "blur" && this.value.length < 5) this.value = ""
}
input.addEventListener("input", mask, false);
input.addEventListener("focus", mask, false);
input.addEventListener("blur", mask, false);
input.addEventListener("keydown", mask, false)
});
});
</script>
</body>
</html>
https://ibb.co/TWyH87K Если одна цифра до скобок, то открывающая скобка не захватывается. Если больше одной цифры, получается вместе с открывающей скобкой. https://ibb.co/6gvxZrt От чего это зависит? И как это исправить, чтобы скобка не захватывалась при более чем одной цифре? Еще раз, спасибо. |
Цитата:
i < 7 && (i = 5);для var matrix = "+999 (__) ___ __ __", (__) ___ __ __ i < 6 && (i = 4);для +99 (__) ___ __ __ Пожалуйста, отформатируйте свой код! Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [html run] ... минимальный код страницы с вашей проблемой [/html] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Виталикк,
строки this.value.length < 5 если нужно уточните сами (будет 6 или 7 соответственно) |
Цитата:
|
А можно сделать так, чтоб знаки кроме "_" или сразу были, или появлялись бы сразу после введения предыдущего перед ними символа, и первая скобка или цифры уже стояли и курсор за ними?
|
Цитата:
|
Очень лёгкий и мощный скрипт. Но есть один нюанс, от которого я буду аплодировать стоя - оставлять каретку там же, где пользователь вводит данные, а не сбрасывать её в конец (event.target).value.
Не задумывались об этом, рони? |
Привет! Слушай, а как бы сделать, чтобы на +7 нельзя было бы поставить фокус и его изменить, а то сейчас получается меняется, если человек случайно по ошибке кликнет.
|
| Часовой пояс GMT +3, время: 09:46. |