16.01.2020, 02:10
|
|
Новичок на форуме
|
|
Регистрация: 16.01.2020
Сообщений: 1
|
|
|
Переписал в ооп с возможностью настройки
Изменил код так, чтобы его можно было использовать на множестве инпутов(с разными настройками).
На странице несколько инпутов, для каждого зададим дата-атрибутом маску:
<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, 16.01.2020 в 02:15.
|
|
16.01.2020, 02:44
|
 |
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
Alexandr Battlehater,
|
|
02.06.2020, 17:22
|
|
Новичок на форуме
|
|
Регистрация: 02.06.2020
Сообщений: 2
|
|
Здравствуйте. Скажите пожалуйста, что нужно исправить в коде, для получения маски вида "+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
От чего это зависит? И как это исправить, чтобы скобка не захватывалась при более чем одной цифре? Еще раз, спасибо.
Последний раз редактировалось Виталикк, 03.06.2020 в 23:28.
Причина: не отображаются изображения примера
|
|
03.06.2020, 15:54
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от Виталикк
|
|
i < 5 && (i = 3);
|
заменить на
i < 7 && (i = 5);
для var matrix = "+999 (__) ___ __ __",
(__) ___ __ __
i < 6 && (i = 4);
для +99 (__) ___ __ __
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
|
03.06.2020, 16:01
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Виталикк,
строки this.value.length < 5 если нужно уточните сами (будет 6 или 7 соответственно)
|
|
03.06.2020, 23:29
|
|
Новичок на форуме
|
|
Регистрация: 02.06.2020
Сообщений: 2
|
|
Сообщение от рони
|
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например:
[html run]
... минимальный код страницы с вашей проблемой
[/html]
О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.
|
Поправил. Буду знать)
Последний раз редактировалось Виталикк, 03.06.2020 в 23:32.
|
|
24.10.2020, 09:36
|
|
Новичок на форуме
|
|
Регистрация: 24.10.2020
Сообщений: 1
|
|
|
А можно сделать так, чтоб знаки кроме "_" или сразу были, или появлялись бы сразу после введения предыдущего перед ними символа, и первая скобка или цифры уже стояли и курсор за ними?
Последний раз редактировалось misol, 24.10.2020 в 09:40.
|
|
24.10.2020, 10:34
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,068
|
|
|
Сообщение от misol
|
|
А можно сделать так,
|
не понял. |
|
09.04.2021, 11:54
|
|
Новичок на форуме
|
|
Регистрация: 09.04.2021
Сообщений: 1
|
|
|
Очень лёгкий и мощный скрипт. Но есть один нюанс, от которого я буду аплодировать стоя - оставлять каретку там же, где пользователь вводит данные, а не сбрасывать её в конец (event.target).value.
Не задумывались об этом, рони?
|
|
15.04.2021, 15:35
|
|
Интересующийся
|
|
Регистрация: 20.10.2018
Сообщений: 24
|
|
|
Привет! Слушай, а как бы сделать, чтобы на +7 нельзя было бы поставить фокус и его изменить, а то сейчас получается меняется, если человек случайно по ошибке кликнет.
|
|
|
|
