Поле ввода с маской Input
Маска в поле помогает пользователю не ошибиться в количестве символов и подсказывает, что значение будет отформатировано автоматически.
Когда использовать
Используйте маски для полей с заранее известным форматом.
Когда необходимо ввести определенное количество символов. Например, дла ввода ОГРН:
![](img/mask-symbols.png)
Когда есть символы-разделители, например, номер паспорта или СНИЛС:
![](img/mask-symbolsdeviders.png)
Описание работы
Маска показывается только после того, как поле получает фокус. Это снижает количество визуального шума на странице:
![](img/mask-onfocus.png)
Если количество символов, которое нужно ввести, может быть разным, как в ИНН, маска не показывается, чтобы не путать пользователя.
Вводимое значение форматируется на лету. Если в маске есть разделители или пробелы, они появляются автоматически сразу после ввода предыдущего символа.
![](img/mask-formating.png)
Если пользователь сам введет дефис или другой разделитель, они игнорируются, т. е. не добавляются дважды.
Если нажать Backspace, сотрется последний «настоящий» символ, который вводил сам пользователь:
![](img/mask-backspace.png)
При попытке ввода недопустимого или лишнего символа, этот символ игнорируется, поле вспыхивает синим. Тултип с текстом ошибки при этом не показывается, т. к. пользователь и сам поймет в чем проблема, а тултип будет только отвлекать:
Размер и расположение
Поле ввода с маской, как и обычное поле, может быть трех размеров. Подробнее смотри в гайде поля ввода.
Ширина поля должна соответствовать ширине вводимого значения. Можно делать поле чуть шире, чтобы выровнять его по ширине с соседними и сделать форму более упорядоченной.
![](img/mask-width.png)
Не разделяйте одно поле на несколько частей. Это затрудняет работу с полем: пользователь не знает, можно ли просто скопировать значение целиком и вставить его в первое поле:
![](img/mask-devide.png)
Фокус и работа с клавиатурой
При клике по полю и при переходе табом поле выглядит одинаково: появляется чёрная рамка и, если поле не заполнено — маска, которые сохраняются до потери фокуса.
Валидация
Поле с ошибкой подсвечивается красной рамкой.
О поведении полей ввода с ошибками читайте в гайде по валидации.
Дизайн
Цвет маски #000 с прозрачностью 32%, цвет текста стандартный — #222.
Символ, который нужно ввести, обозначается в маске специальным знаком подчеркивания, ширина которого точно соответствует ширине цифр. Это нужно, чтобы по мере ввода маска не смещалась.