От автора: я не могу сослаться на какие-либо исследования в UX, но в порядке наблюдения могу отметить. Мне нравится, когда поля формы с определенным форматом данных используют маски. И я подумал, выложу парочку демо, чтобы вы поняли, о чем я.
Плагин Inputmask Робина Хербитса (JQuery)
Плагин активно поддерживается.
Для работы плагина нужен JQuery. Вместе они весят 180Кб в несжатом виде, что довольно много.
Маска вводимых данных от Эстель Вейль
Эстель написала свою версию на чистом JS:
Никаких дополнительных файлов не требует и весит 5Кб в несжатом виде. Есть версия в виде React компонента.
Осторожно
Я проверил последнюю версию Inputmask, проблема до сих пор не решена. В версии Эстель нет проблемы с голосовым помощником, так как там маска отображается через placeholder и не является настоящим значением поля ввода.
Politespace от Filament Group
Еще одна брешь в доступности масок от Filament Group.
Эта версия отличается от других тем, что маска не используется во время редактирования полей ввода, она применяется только после перемещения фокуса.
Автор: Chris Coyier
Источник: //css-tricks.com/
Редакция: Команда webformyself.
