Маска вводимых данных

Маска вводимых данных

От автора: я не могу сослаться на какие-либо исследования в UX, но в порядке наблюдения могу отметить. Мне нравится, когда поля формы с определенным форматом данных используют маски. И я подумал, выложу парочку демо, чтобы вы поняли, о чем я.

Маска вводимых данных

Плагин Inputmask Робина Хербитса (JQuery)

Плагин активно поддерживается.

Для работы плагина нужен JQuery. Вместе они весят 180Кб в несжатом виде, что довольно много.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

Маска вводимых данных от Эстель Вейль

Эстель написала свою версию на чистом JS:

Никаких дополнительных файлов не требует и весит 5Кб в несжатом виде. Есть версия в виде React компонента.

Осторожно

Я проверил последнюю версию Inputmask, проблема до сих пор не решена. В версии Эстель нет проблемы с голосовым помощником, так как там маска отображается через placeholder и не является настоящим значением поля ввода.

Politespace от Filament Group

Еще одна брешь в доступности масок от Filament Group.

Эта версия отличается от других тем, что маска не используется во время редактирования полей ввода, она применяется только после перемещения фокуса.

Автор: Chris Coyier

Источник: https://css-tricks.com/

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

jQuery: основы

Изучите jQuery с нуля!

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий