Форум

рони · #81 (**permalink**) 06.08.2021, 13:46

Alex_medik,
после строки 15 пост #80 надо добавить строки 14 - 42 пост #72
уточнить только var input = document.querySelector("input");
будет что-то ... input[type='tel']

Alex_medik · #82 (**permalink**) 06.08.2021, 15:10

Удивительно ) один раз сработало и всё (((

Gringo675 · #83 (**permalink**) 13.08.2021, 14:44

Мое переосмысление кода рони.

<!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

Vaska · #84 (**permalink**) 19.08.2021, 16:20

Запись мобильного телефона в формате "+7 (923) 223-33-22" непригодна для отправки СМС на этот номер.
Нужно записывать и приводить к нормальному формату 7923223322.
Можно ли сразу передавать в нормальном формате значение номера телефона в тег value="7923223322"?

рони · #85 (**permalink**) 19.08.2021, 16:35

Vaska,
сделайте скрытое поле и дублируйте туда в нужном вам виде

vit557 · #86 (**permalink**) 21.10.2021, 23:51

Подскажите, как изменить скрипт из 5-го сообщения - так, чтобы разрешено было в 2-вариантах вводить - номер начинается либо +7, либо 8. Т.е. основной вариант остается +7, но если хотят, то удаляют +7 и пишут 8. А то сейчас, многие выделяют +7 и вставляют ctrl+v номер, начинающийся на 8 и получается +8. Соответственно, нужно в таком случае, чтобы если ctrl+v номер, начинающийся на 8 разрешить без плюса..

рони · #87 (**permalink**) 22.10.2021, 07:28

vit557,
нужен более продуманный алгоритм, пока без вариантов.

vit557 · #88 (**permalink**) 27.10.2021, 23:44

Сообщение от рони

vit557,
нужен более продуманный алгоритм, пока без вариантов.

А если с плюсом не заморачиваться, его оставить в начале, а просто разрешить 8 - это реально? Кто хочет, просто удаляет 7 и пишет 8.. А я уже потом при сохранении в БД +8 заменю на 8 в начале строки

рони · #89 (**permalink**) 27.10.2021, 23:57

vit557,

var matrix = "+_ (___) ___ ____",

Vaska · #90 (**permalink**) 06.11.2021, 09:41

Россия и Казахстан имеет код страны 7.
Количество цифр номера 11 для двух стран.
Контролировать ввод номеров телефона можно только по кодам операторов мобильной связи, состоящие из трех цифр.
Как вы будете с помощью только JS отделять мух от котлет?
Как запретить регистрироваться казахским номерам и разрешить только российские?
Как отделить городские номера от мобильных номеров, многие имеют одинаковое число цифр.
Нужно делать проверку кодов операторов и сверять с вводимым номером мобильного телефона.
Как вы будете делать эту проверку с JS?

По моему мнению, только JS вообще не пригоден для решения задачи с мобильными номерами телефонов.
Нужен обработчик на PHP + JS + библиотека с кодами операторов типа libphonenumber-for-php.

Форум

Справочник

Discord чат

Курсы javascript