Цитата:
|
Здравствуйте, Рони. Спасибо за классный скрипт. Не подскажете, как видоизменить данный скрипт, с учётом записи маски телефонного номера, на двух формах. Дело в том, что, маска телефона в input, работает только в одной форме поля телефон, если на странице находятся две формы, одна из них находится в подвале сайта, то данная маска уже не работает во второй форме поля телефон? Дублировать скрипт из-за var input = document.querySelector("#tel1"); и var input = document.querySelector("#tel2");? Извините за нубский вопрос, в javascript не особо силён
|
Loki,
class="tel" добавить полям ввода
<!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 = "+7 (___) ___ ____",
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>
|
Спасибо, за решение Ронни. Пример рабочий. Но к сожалению применительно к моему сайту не подошёл, по данной схеме маски в input перестали работать сразу в двух формах телефонных полей. На сайте стоят формы на Ajax Form (cms Modx Revo), var input = document.querySelector("#tel"); оказался необходим в моём случае.
Решил проблему добавлением (дублем строк с 43- по 53) и как оказалось этот вариант оказался рабочим. Не знаю как на правильность и изящество решения, ибо упоминал, что не особо сильно разбираюсь в javascript. Ниже решение, хотелось бы узнать, Ваше мнение как гуру. Такой вариант решения правильный с точки зрения синтаксиса, или глупость полная? Хотя работает.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
</head>
<body>
<input value="" id="af_tel1" placeholder="Телефон*">
<input value="" id="af_tel2" placeholder="Телефон*">
<script>
window.addEventListener("DOMContentLoaded", function() {
var keyCode;
function mask(event) {
event.keyCode && (keyCode = event.keyCode);
var pos = this.selectionStart;
if (pos < 3) event.preventDefault();
var matrix = "+7 (___) ___-__-__",
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 = ""
}
var input = document.querySelector("#af_tel1");
input.addEventListener("input", mask, false);
input.addEventListener("focus", mask, false);
input.addEventListener("blur", mask, false);
input.addEventListener("keydown", mask, false)
var input = document.querySelector("#af_tel2");
input.addEventListener("input", mask, false);
input.addEventListener("focus", mask, false);
input.addEventListener("blur", mask, false);
input.addEventListener("keydown", mask, false)
});
</script>
</body>
</html>
|
Loki,
а добавить id и class было никак? |
Не понял Вас Ронни (проверка в двух input телефонных полей на сайте осуществляется по id="af_tel1" и id-"af_tel2"), но всё равно спасибо за скрипт
|
Loki,
<input value="" class="tel" id="af_tel1"> <input value="" class="tel" id="af_tel2"> и скрипт из поста №43 |
рони,
Нет, таким образом не работает, только что проверил на сайте, инпуты в двух телефонных полях не активируются вашим скриптом. |
var input = document.querySelector("#af_tel1"); и var input = document.querySelector("#af_tel2"); необходимы на сайте, в такой конструкции пост № 44, всё работает.
|
Вообще, работоспособность нескольких форм на одной странице сайта, притча во языцех, на двух формах стоят гуглокаптчи - reCAPTCHA2, так вот до недавнего времени тоже наблюдалась проблема совместной работы, работала только одна, буквально 2 дня назад нашёл решение проблемы. Теперь работают обе.
|
| Часовой пояс GMT +3, время: 09:45. |