Поле ввода с маской

Маска в поле помогает пользователю не ошибиться в количестве символов и подсказывает, что значение будет отформатировано автоматически.

Когда использовать

Используйте маски для полей с заранее известным форматом.

Просто определенное количество символов. Например, ОГРН:

Символы и разделители. Например, номер паспорта или СНИЛС:

Описание работы

Маска показывается только после того, как поле получает фокус. Это снижает количество визуального шума на странице:

Если количество символов, которое нужно ввести, может быть разным, как в ИНН, маска не показывается, чтобы не путать пользователя.

Вводимое значение форматируется на лету. Если в маске есть разделители или пробелы, они появляются автоматически сразу после ввода предыдущего символа.

Если пользователь сам введет дефис или другой разделитель, они игнорируются, т.е. не добавляются дважды.

Если нажать Backspace, сотрется последний «настоящий» символ, который вводил сам пользователь:

При попытке ввода недопустимого или лишнего символа, этот символ игнорируется, поле вспыхивает синим. Балун с текстом ошибки при этом не показывается, т.к. пользователь и сам поймет в чем проблема, а балун будет только отвлекать:

Размер

Ширина поля должна соответствовать ширине вводимого значения. Можно делать поле чуть шире, чтобы выровнять его по ширине с соседними и сделать форму более упорядоченной.

Не разделяйте одно поле на несколько частей. Это затрудняет работу с полем: пользователь не знает, можно ли просто скопировать значение целиком и вставить его в первое поле:

Валидация

Валидация не отличается от обычного поля ввода.

Дизайн

Цвет маски #000 с прозрачностью 30%, цвет текста стандартый — #333.

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