Учимся работать с маской телефона
В справочнике «Информационные карты» хранятся карты покупателей разных видов, в том числе дисконтные карты. Изначально в справочнике нет возможности хранить номер телефона клиента. Такую возможность нужно реализовать. Также нужна возможность удобного поиска по информационным картам по номеру телефона. При этом нужно добавить маску номера 994 (xx) xxx-xx-xx.
Исходные данные:
1. Бухгалтерия предприятия 3.0.71.83
2. Платформа 8.3.16.1224
Решение задачи:
Часть 1. Хранение номера телефона в базе данных и отображение на форме:
Если мы сохраним маску на уровне реквизита справочника, то в базе данных телефон будет храниться с маской:
и нам будет не удобно делать поиск, так как маски могут использоваться разные. Оператор запросто может запутаться, в каком формате вводить номер телефона для поиска.
Для решения данной задачи лучше всего хранить номер телефона без маски, а телефон с маской формировать и отображать непосредственно в форме. Добавим маску телефон на уровне элемента формы справочника:
Разберем саму маску. «\9\9\4» означает, что мы хотим, чтобы маска начиналась с цифр 994. Круглые скобки нужны для удобства восприятия, а цифра «9» в маске означает, что можно ввести произвольный символ цифры.
Для того, чтобы номер телефона в базе данных хранился только в виде цифр, в модуле объекта в процедуре ПередЗаписью() сделаем вызов метода ОставитьВСтрокеТолькоЦифры(), который разместим в модуле менеджера, так как он будет вызываться как из модуля объекта, так и из модуля формы.
Модуль менеджера:
Телефон на форме с маской выглядит так:
В базе данных хранится в виде:
Таким образом первая часть задачи решена.
Часть 2. Вывод телефона с маской на форму:
Что получилось на данный момент:
1. Мы добавили маску для телефона на уровне элемента формы;
2. Мы научились сохранять телефон в базу в виде цифр.
Если мы протестируем работу формы на данном этапе, то обнаружим, что телефон, который вводился пользователем как:
после сохранения информации будет отображаться как:
Почему так происходит?
Дело в том, что на момент написания статьи Платформа, к сожалению, еще не умеет корректно преобразовывать телефон в виде цифр в телефон по маске. Поэтому нам потребуется написать функцию, которая будет преобразовывать телефон, который мы храним в базе данных, в телефон, который будет отображаться на форме, с учетом маски. Функция не претендует на универсальность, она лишь является примером, как можно реализовать подобный функционал для решения текущей задачи:
В функцию ПреобразоватьСтрокуПоМаске() передаем телефон, содержащий только цифры, и маску. В цикле проходим по каждому символу маски:
Если текущий символ маски равен «\», то пропускаем его. Если текущий символ — цифра, выводим цифру из номера телефона по порядку. Для всех остальных символов — выводим символ «как есть».
Далее в модуле формы элемента справочника в процедуре ПриСозданииНаСервере() прописываем код, который преобразует телефон из базы данных в телефон по маске:
Далее чтобы телефон по маске корректно отображался при всех событиях формы в модуле формы элемента справочника прописываем:
Таким образом задача решена. С одной стороны оператору удобно делать поиск карты по номеру телефон без маски:
С другой стороны номер телефона хранится в базе в удобном для поиска виде. При этом на форме номер телефона выводится в виде, удобном для пользователя.
Как на Андроид внести номер в ЧС по "маске"?
Как внести в ЧС данные, чтобы все номера, имеющие такое начало, блокировались.
Прежде всего интересует способ на Андроид 11.
Вот не знаю где Вы услышали "маска". Копался нарочно в интернете чтоб понять что это. Причём я сейчас не ёрничаю. Когда понял что под "маской", подразумевается "префикс" ,начал изучать есть ли подобная возможность в моём гаджете. Есть. Всегда прошу задающих вопросы о функциях смартфонов указывать и модель устройства и версию Андроид. Не просто так прошу. Сейчас почти каждый производитель считает чуть ли не своей обязанностью "натянуть" на Андроид ещё и свою оболочку. Потому в настройках отсутствует единообразие. И некоторые пункты меню могут в разных оболочках иметь разные названия. Попробуйте у себя в настройках чёрного списка поискать пункт "задать блокировку по правилам" а внутри этого пункта "блокировка по префиксу". Сейчас набросаю скриншотов, как это выглядит для моего устройства, может в Вашем будет что-то подобное. Комментировать скрины не буду, пускай будут расположены по порядку, может Вам это поможет.
Фуф,задолбался закрашивать личные номера. Спамеров из своего ЧС оставил на всеобщее обозрение. Всяк прочитавший мой ответ,может смело незарисованные мной номера и к себе в ЧС занести.
Создаем маску для номера телефона
В качестве примера создадим форму для сборка заявок с номерами телефонов. Мы вводим номер телефона в российском формате +7(900)111-11-11. Маска не позволит нам ошибиться, а также сделает ввод номера более наглядным.
Кнопка Отправить становится активной только когда номер введен корректно.
Подключаем библиотеку Imask.js
Для начала вам необходимо будет скачать стартовый проект на моем GitHub.
Рассмотрим два основных вариантов подключения Imask.js.
Подключение через CDN
Для подключения скрипта напрямую с хранилища Unpkg в конце файла index.html вставьте скрипт:
Установка в NPM
Если вы пользуетесь пакетным менеджером NPM — можете установить его в качестве зависимости:
А далее импортировать в проект:
Дополнительные стили для кнопки
Кнопка Отправить должна быть по умолчанию не активна и только, если номер заполнен верно — делаем ее активной. Поработаем со стилями нашей кнопки в style.css.
Чтобы сделать кнопку неактивной используем свойство pointer-events со значением none. Класс btn—active делает кнопку снова активной и меняет ее цвет на более яркий.
Скрипт для работы маски и кнопки отправки
Описание скрипта в комментариях к коду.
Мы создаем объект маски phoneMask, который привязываем к полю phoneInput. Объект phoneMask имеет поля для работы, например:
Что такое маски ввода и как с ними работать
Маска ввода — это строка символов, указывающая формат допустимых значений, вводимых пользователем в текстовые поля. Маска ввода позволяет не только контролировать ввод данных, но и упрощать процесс ввода. Маску используют в том случае, когда вводимые данные должны содержать определенные символы в некоторых позициях вводимой строки. Самым простым и ярким примером таких данных являются номера телефонов. Маска ввода должна обеспечить возможность вводить только цифры номера, а остальные символы (скобки вокруг кода города, дефис между цифрами номера) будут добавляться автоматически.
Возможность установки маски ввода реализована через указание в атрибутах компонента.
Вариант заполнения, флаг «Всегда отображать маску» не обязателен. Каждая строка маски определяет один символ, вводимый пользователем. Добавление/удаление строк осуществляется с помощью кнопок +/- справа. Текст маски вводить посимвольно:
Например, маска /d/ добавляет для поля ввода ограничение на ввод целочисленных значений. В компоненте может быть использована маска указанная на скрине, которая соответственно устанавливает ограничение на ввод 4 целочисленных значений.
В готовой услуге это может выглядеть так:
Маска не позволит ввести более отличные от чисел символы и в количестве более четырех.
Маска допускает использование разделителей между группами символов, например «-». Количество символов, разделители (такие как тире или точка) визуально отображаются на поле.
В этом случае форма на экране будет выглядеть так:
Вариант с разделителем в виде отступа в один символ. Например, 1 000, т.е число 1000 отображается пользователю как 1 000.
В конструкторе:
Маска может совмещать числовой и буквенный ввод. В этом случае необходимо использовать символы /D/, который ограничивает ввод числовых символов (0-9).
В примере на скрине выше форма будет допускать для ввода только цифры и буквы через разделитель, заложенный в маске. При этом маска поддерживает как латиницу, так и кириллицу.
Свое применение в ВКУ имеют /w/, который позволяет вводить в форму буквенный или цифровой символ или знак подчёркивания. Важно!!! Буквы ограничены латиницей. Количество вводимых символов ограничено количеством строк маски. На примере не более 7.
В конструкторе это выглядит так:
На экране это будет выглядеть так:
А также /W/, который позволяет вводить любой символ, кроме буквенного или цифрового символа или знака подчёркивания.
В конструкторе это выглядит так:
На экране это будет выглядеть так:
Комбинация масок позволяет создавать сложные проверочные конструкции. Например, маска /[а-яА-Я]|d|ё|Ё/ позволяет создать ограничение на ввод символов отличных от кириллицы. В сочетании с числовыми можно добиться следующего.
Вид в конструкторе:
На экране это будет выглядеть так:
Конструктор поддерживает маску времени, то есть создать ограничение, позволяющее вводить три группы чисел, отображающих часы, минуты и секунды. Конструкция /[0-2]/ ограничивает ввод пары чисел, в которых первое должно быть не больше 2. Соответственно /[0-5]/ — первое из пары не больше 5.
Вид в конструкторе: