Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #81 (permalink)  
Старый 06.08.2021, 14:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,150

Alex_medik,
после строки 15 пост #80 надо добавить строки 14 - 42 пост #72
уточнить только var input = document.querySelector("input");
будет что-то ... input[type='tel']
Ответить с цитированием
  #82 (permalink)  
Старый 06.08.2021, 16:10
Новичок на форуме
Отправить личное сообщение для Alex_medik Посмотреть профиль Найти все сообщения от Alex_medik
 
Регистрация: 06.08.2021
Сообщений: 4

Удивительно ) один раз сработало и всё (((
Ответить с цитированием
  #83 (permalink)  
Старый 13.08.2021, 15:44
Новичок на форуме
Отправить личное сообщение для Gringo675 Посмотреть профиль Найти все сообщения от Gringo675
 
Регистрация: 13.08.2021
Сообщений: 1

Мое переосмысление кода рони.
<!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
Ответить с цитированием
  #84 (permalink)  
Старый 19.08.2021, 17:20
Кандидат Javascript-наук
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 127

Запись мобильного телефона в формате "+7 (923) 223-33-22" непригодна для отправки СМС на этот номер.
Нужно записывать и приводить к нормальному формату 7923223322.
Можно ли сразу передавать в нормальном формате значение номера телефона в тег value="7923223322"?
Ответить с цитированием
  #85 (permalink)  
Старый 19.08.2021, 17:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,150

Vaska,
сделайте скрытое поле и дублируйте туда в нужном вам виде
Ответить с цитированием
  #86 (permalink)  
Старый 22.10.2021, 00:51
Новичок на форуме
Отправить личное сообщение для vit557 Посмотреть профиль Найти все сообщения от vit557
 
Регистрация: 22.10.2021
Сообщений: 2

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

Последний раз редактировалось vit557, 22.10.2021 в 01:06.
Ответить с цитированием
  #87 (permalink)  
Старый 22.10.2021, 08:28
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,150

vit557,
нужен более продуманный алгоритм, пока без вариантов.
Ответить с цитированием
  #88 (permalink)  
Старый 28.10.2021, 00:44
Новичок на форуме
Отправить личное сообщение для vit557 Посмотреть профиль Найти все сообщения от vit557
 
Регистрация: 22.10.2021
Сообщений: 2

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

Последний раз редактировалось vit557, 28.10.2021 в 00:54.
Ответить с цитированием
  #89 (permalink)  
Старый 28.10.2021, 00:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,150

vit557,

var matrix = "+_ (___) ___ ____",
Ответить с цитированием
  #90 (permalink)  
Старый 06.11.2021, 09:41
Кандидат Javascript-наук
Отправить личное сообщение для Vaska Посмотреть профиль Найти все сообщения от Vaska
 
Регистрация: 08.05.2017
Сообщений: 127

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

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

Последний раз редактировалось Vaska, 06.11.2021 в 14:20.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать скролл без возврата? Александр141 Элементы интерфейса 3 24.08.2015 16:40
как сделать tooltip без jQuery CrossFire Элементы интерфейса 2 18.11.2013 01:29
Как сделать проверку input 5-7 символов lamer Общие вопросы Javascript 5 18.06.2012 22:10
Как сделать submit без самой кнопки submit shaltay jQuery 3 06.05.2011 15:36
Как сделать INPUT с красивым задним фоном? greatilya (X)HTML/CSS 15 26.11.2009 14:04