Alex_medik,
после строки 15 пост #80 надо добавить строки 14 - 42 пост #72 уточнить только var input = document.querySelector("input"); будет что-то ... input[type='tel'] |
Удивительно ) один раз сработало и всё (((
|
Мое переосмысление кода рони.
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type='text/css'>
.wrapper {
width: 400px;
}
.input-wrapper {
width: 200px;
margin: 10px auto;
padding: 10px;
background-color: grey;
}
.input-wrapper.completed {
background-color: green;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="input-wrapper"><input class="mask" placeholder="+7 (___) ___-__-__" type="tel" value="+7 (___) ___-__-__"></div>
<div class="input-wrapper"><input class="mask" placeholder="+7 (___) ___-__-__" type="tel" value="+7 (___) ___-__-__"></div>
</div>
<script>
window.addEventListener("DOMContentLoaded", function () {
activateMasks();
function activateMasks() {
let elems = document.querySelectorAll('input.mask');
elems.forEach(elem => {
let mask = new Mask();
elem.addEventListener("input", mask.create, false);
elem.addEventListener("focus", mask.create, false);
elem.addEventListener("click", mask.create, false);
elem.addEventListener("keydown", mask.create, false);
})
}
function Mask() {
this.completed = false;
this.create = (event) => {
let element = event.target;
let oldValue = element.value;
let caretPosition = element.selectionStart;
let isCaretInEndPosition = oldValue.substring(caretPosition).search(/\d/) === -1;
let caretMinPosition = 4; // минимально допустимая позиция каретки (не заходить на '+7 (' )
if (event.type === "keydown") {
let key = event.key;
if (key === "Backspace" && oldValue.substring(caretPosition - 1, caretPosition).search(/[\s)-]/) !== -1) {
let shift = 1; // на сколько сдвинуть каретку
if (oldValue.substring(caretPosition - 2, caretPosition) === ') ') shift = 2;
element.setSelectionRange(caretPosition - shift, caretPosition - shift);
}
if (key === "Delete" && oldValue.substring(caretPosition, caretPosition + 1).search(/[\s)-]/) !== -1) {
let shift = 1;
if (oldValue.substring(caretPosition, caretPosition + 2) === ') ') shift = 2;
element.setSelectionRange(caretPosition + shift, caretPosition + shift);
}
if (key === "ArrowLeft" && caretPosition === caretMinPosition) event.preventDefault();
if (key === "ArrowRight" && isCaretInEndPosition) event.preventDefault();
if (key === "ArrowUp") key = "Home";
if (key === "ArrowDown") key = "End";
if (key === "Home") {
element.setSelectionRange(caretMinPosition, caretMinPosition);
event.preventDefault()
}
if (key === "End") {
let caretMaxPosition = oldValue.indexOf("_");
if (caretMaxPosition !== -1) {
element.setSelectionRange(caretMaxPosition, caretMaxPosition);
event.preventDefault()
}
}
return
}
// вычисляем значение value элемента
let newValue = oldValue; // при событии focus & click значение value не меняется
if (event.type === "input") {
let matrix = "+7 (___) ___-__-__",
i = 0,
def = matrix.replace(/\D/g, ""),
val = oldValue.replace(/\D/g, "")
newValue = matrix.replace(/[_\d]/g, function (match) {
return i < val.length ? val.charAt(i++) || def.charAt(i) : match
});
element.value = newValue;
}
// определяем положение каретки
let caretMaxPosition = newValue.indexOf("_");
let isCompleted = false;// все ли цифры заполнены
if (caretMaxPosition === -1) {
caretMaxPosition = newValue.length;
isCompleted = true;
}
if (isCaretInEndPosition) {
caretPosition = caretMaxPosition
} else if (caretPosition < caretMinPosition) {
caretPosition = caretMinPosition
} else if (caretPosition > caretMaxPosition) {
caretPosition = caretMaxPosition
}
element.setSelectionRange(caretPosition, caretPosition);
// если изменилось значение completed
if (isCompleted !== this.completed) {
this.completed = !this.completed;
element.parentElement.classList.toggle('completed');
}
}
}
});
</script>
</body>
</html>
Codepen |
Запись мобильного телефона в формате "+7 (923) 223-33-22" непригодна для отправки СМС на этот номер.
Нужно записывать и приводить к нормальному формату 7923223322. Можно ли сразу передавать в нормальном формате значение номера телефона в тег value="7923223322"? |
Vaska,
сделайте скрытое поле и дублируйте туда в нужном вам виде |
Подскажите, как изменить скрипт из 5-го сообщения - так, чтобы разрешено было в 2-вариантах вводить - номер начинается либо +7, либо 8. Т.е. основной вариант остается +7, но если хотят, то удаляют +7 и пишут 8. А то сейчас, многие выделяют +7 и вставляют ctrl+v номер, начинающийся на 8 и получается +8. Соответственно, нужно в таком случае, чтобы если ctrl+v номер, начинающийся на 8 разрешить без плюса..
|
vit557,
нужен более продуманный алгоритм, пока без вариантов. |
Цитата:
|
vit557,
:-? var matrix = "+_ (___) ___ ____", |
Россия и Казахстан имеет код страны 7.
Количество цифр номера 11 для двух стран. Контролировать ввод номеров телефона можно только по кодам операторов мобильной связи, состоящие из трех цифр. Как вы будете с помощью только JS отделять мух от котлет? Как запретить регистрироваться казахским номерам и разрешить только российские? Как отделить городские номера от мобильных номеров, многие имеют одинаковое число цифр. Нужно делать проверку кодов операторов и сверять с вводимым номером мобильного телефона. Как вы будете делать эту проверку с JS? По моему мнению, только JS вообще не пригоден для решения задачи с мобильными номерами телефонов. Нужен обработчик на PHP + JS + библиотека с кодами операторов типа libphonenumber-for-php. |
| Часовой пояс GMT +3, время: 21:18. |