Что такое маски ввода и как с ними работать

Общая информация

Маска ввода — это строка символов, указывающая формат допустимых значений, вводимых пользователем в текстовые поля. Маска ввода позволяет не только контролировать ввод данных, но и упрощать процесс ввода. Маску используют в том случае, когда вводимые данные должны содержать определённые символы в некоторых позициях вводимой строки. Самым простым и ярким примером таких данных являются номера телефонов. Маска ввода должна обеспечить возможность вводить только цифры номера, а остальные символы (например, скобки вокруг кода города, дефис между цифрами номера) будут добавляться автоматически

Возможность установки маски ввода реализована через указание в атрибутах компонента

Настройка масок ввода

Флаг «Всегда отображать маску» необязателен. Каждая строка маски определяет один символ, вводимый пользователем. Добавление/удаление строк осуществляется с помощью кнопок +/- справа. Текст маски вводить посимвольно:

Например, маска /d/ добавляет для поля ввода ограничение на ввод целочисленных значений. В компоненте может быть использована маска, указанная на скрине, которая устанавливает ограничение на ввод четырёх целочисленных значений

В готовой услуге это может выглядеть так:

Маска не позволит ввести более отличные от чисел символы и в количестве более четырех

Маска допускает использование разделителей между группами символов, например, «-». Количество символов, разделители, такие как тире или точка, визуально отображаются на поле

В этом случае форма на экране будет выглядеть так:

Вариант с разделителем в виде отступа в один символ. Например, 1 000, то есть число 1000 отображается пользователю как 1 000

В конструкторе:

На экране:

Маска может совмещать числовой и буквенный ввод. В этом случае необходимо использовать символ /D/, который ограничивает ввод числовых символов (0-9)

В примере выше форма будет допускать для ввода только цифры и буквы через разделитель, заложенный в маске. При этом маска поддерживает как латиницу, так и кириллицу

Своё применение в ВКУ имеет /w/, который позволяет вводить в форму буквенный и цифровой символы или знак подчёркивания

Важно!!! Буквы ограничены латиницей. Количество вводимых символов ограничено количеством строк маски. На примере не более 7

В конструкторе это выглядит так:

На экране это будет выглядеть так:

А также /W/, который позволяет вводить любой символ, кроме буквенного и цифрового символов или знака подчёркивания

В конструкторе это выглядит так:

На экране это будет выглядеть так:

Комбинация масок позволяет создавать сложные проверочные конструкции. Например, маска /[а-яА-Я]|d|ё|Ё/ позволяет создать ограничение на ввод символов отличных от кириллицы. В сочетании с числовыми можно добиться следующего

Вид в конструкторе:

На экране это будет выглядеть так:

Конструктор поддерживает маску времени, то есть создать ограничение, позволяющее вводить три группы чисел, отображающих часы, минуты и секунды. Конструкция /[0-2]/ ограничивает ввод пары чисел, в которых первое должно быть не больше 2. Соответственно /[0-5]/ — первое из пары не больше 5

Вид в конструкторе:

На экране это будет выглядеть так: