Как сделать маску для телефона 1с
Обновлено: 07.07.2024
Одним из основных элементов для отправки данных с сайта является форма обратной связи. В поля формы можно вводить разные данные по маске: телефон, дату, серийные номера и др. Для создания маски существует специальный плагин jQuery Mask Plugin. Плагин позволяет использовать и создавать различные варианты масок из букв, цифр и знаков.
Код для подключения:
Маска может содержать следующие символы:
- a – любые буквы из диапазона A-Z,a-z
- 9 – любые цифры из диапазона 0-9
- * – любые буквы или цифры A-Z,a-z,0-9
Далее можно вызвать плагин с различными параметрами.
Плагин Masked Input Plugin также предоставляет следующие воможности:
- placeholder позволяет установить текст, который увидит пользователь при клике мышки в поле input.
- definitions позволяет создавать свои маски для ввода символов.
В этом примере символ ~ является шаблоном для ввода символов + и -
Перевод курсора в начало маски
Чтобы при щелчке по маске курсор переместился в начало маски, а не остался в месте клика посередине маски, необходимо исользовать следующий плагин.
Цифра при вызове .setCursorPosition(3) указывает на позицию, в которой должен быть поставлен курсор:
Ниже приведен пример полей с различными масками ввода данных и переводом курсора при щелчке по полю в начало маски (скачать пример).
Подключение плагина
После того как Вы скачали этот плагин (файл js), его необходимо подключить. Это осуществляется с помощью элемента script :
Создание HTML маски ввода
Создания маски ввода осушествляется в js коде с помощью следующих знаков:
- Цифра 9 – соответствует цифре от 0 до 9.
- Символ a – представляет собой любой английский символ (A-Z, a-z).
- Знак * - представляет собой любой алфавитно-цифровой символ (A-Z, a-z, 0-9).
Например рассмотрим процесс создания маски ввода телефона для элемента input , имеющего id="phone" :
Создание HTML элементу input маски ввода телефона
Если в качестве заполнителя Вы хотите использовать что-то другое, то его можно указать посредством параметра placeholder следующим образом:
Использование различных заполнителей в масках ввода masked input
Кроме placeholder данный плагин имеет ещё параметр completed . Он предназначен для задания действий, которые будут выполнятся после того как пользователь завершит ввод маски ввода.
Иногда бывают такие ситуации, когда одна часть маски является обязательной для заполнения, а другая часть нет. Чтобы это указать, в Masked Input используется знак '?' . Этот знак является специальным символом, после которого необходимо разместить часть маски необязательной для заполнения.
Например, пользователю необходимо ввести число от 0 до 0.99 . При этом обязательным для заполнения является указание хотя бы одного знака после запятой.
Демонстрация работы маски для ввода числа с одним или двумя знаками после запятой
Настройка маски ввода Masked Input
Плагин Masked Input позволяет использовать в маске кроме предопределенных специальных знаков ( 9 , a , * ) свои собственные.
Например, создадим для маски специальный символ ~ , который при вводе должен быть заменён на знак ( + ) или минус ( - ).
Демонстрация работы маски для ввода положительного или отрицательного числа
Например, создадим маску для ввода CSS цвета в шестнадцатеричном формате:
Демонстрация работы маски для ввода цвета CSS в шестандцатиричном формате
Пример создания маски ввода телефона
Рассмотрим пример создания маски для ввода телефона в зависимости от выбранной страны:
Демонстрация работы маски для ввода телефона в зависимости от выбранной страны
На этом шаге мы рассмотрим компонент TMaskEdit .
Компонент TMaskEdit (Ввод по маске) используется как и компонент TEdit - для ввода и хранения строки текста . Но в отличие от поля ввода, ввод по маске позволяет создать удобный фильтр (маску) , на основании которого будут редактироваться и упорядочиваться вводимые символы и автоматически формироваться заданные разделительные символы. Маска задается в свойстве EditMask и содержит строку специальных символов для редактирования и форматирования вводимых символов.
Строка маски состоит из трех полей , разделенных точкой с запятой. Первое поле представляет саму маску , второе поле определяет режим сохранения литералов маски , как части вводимых данных и третье поле используется для символа, который определяет не вводимый символ .
Для первого поля маски используются символы форматирования, перечисленные ниже.
Любой символ, который не приведен в таблице, может использоваться в первой части маски как литерал , т.е. он будет воспроизводиться точно так же, как введен. Такие символы вставляются автоматически, и курсор проскакивает их в процессе ввода. Специальные символы могут использоваться как литералы, если перед ними стоит символ " \ " (обратная черта) .
Второе поле маски представляет символ, который определяет, должны ли включаться литералы маски как часть текста. Например, следующая маска может использоваться для ввода телефонных номеров с дополнительным кодом города.
Символ 0 во втором поле говорит о том, что свойство Text будет содержать 10 цифр вместо тех 14, которые будут отображаться при вводе данных. Эти параметры могут быть изменены в редакторе для свойства EditMask или программно после изменения константы MaskNoSave .
В третьем поле маски находится символ, который отображается в поле ввода для пробелов. По умолчанию это тот же самый символ, что используется как специальный символ маски для пробелов.
Не используйте много символов, каждый символ маски представляет один байт . Для ввода многобайтовых символов используйте специальные символы L , 1 , А , а , C или с при этом специальные символы должны быть удвоены. Например, LL может использоваться для двух однобайтовых символов или для одного двухбайтового символа. Все литеральные символы должны быть однобайтовыми.
Используем небольшую программу для изучения свойств TMaskEdit .
Разместим на форме компоненты: TMaskEdit и TLabel . В программе для обработчика события OnChange компонента TMaskEdit введем следующий текст:
Для компонента MaskEdit1 выберем свойство EditMask (рис.1.).
Рис.1.Редактор маски и основная форма
В редакторе маски в строку InputMask вводится необходимая маска. Справа расположен список примеров, слева внизу расположена строка TestInput , в которой можно протестировать маску. Маски сохраняются в файлах с расширением .dem , и их можно выбирать после щелчка на кнопке Masks. в редакторе маски.
В наших решениях вы можете изменять маску телефона самостоятельно, чтобы собирать контакты посетителей в едином формате и не терять данные из-за того, что поля были заполнены некорректно.
Рабочий стол → Настройки →Настройки продукта → Настройки модулей → Аспро: Корпоративный сайт современной компании.
Таким образом, для Белоруссии маска валидации будет выглядеть так:
(знак плюса, затем три цифры кода государства, две цифры кода города в скобках, а затем группы из трех, двух и еще раз двух цифр).
Опираясь на принципы создания маски валидации, сформируйте свой вариант и замените его в соответствующем поле, сохранив изменения.
Читайте также: