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

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

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

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

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

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

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

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

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

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

Осторожно

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

Politespace от Filament Group

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

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

Автор: Chris Coyier

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

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

Самые свежие новости IT и веб-разработки на нашем Telegram-канале

Курс по jQuery: основы

Изучите jQuery с нуля до результата!

Смотреть курс

Метки:

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree