Маска вводу

51

Від автора: я не можу послатися на якісь дослідження в UX, але в порядку нагляду можу відзначити. Мені подобається, коли поля форми з певним форматом даних використовують маски. І я подумав, викладу парочку демо, щоб ви зрозуміли, про що я.

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

Плагін Маска Вводу Робіна Хербитса (JQuery)

Плагін активно підтримується.

Для роботи плагіну потрібне JQuery. Разом вони важать 180Кб в стислому вигляді, що досить багато.

Маска введених даних від Естель Вейль

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

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

Обережно

Я перевірив останню версію маска вводу, проблема досі не вирішена. У версії Естель немає проблеми з голосовим помічником, так як там маска відображається через placeholder і не є справжнім значенням поля вводу.

Politespace від Filament Group

Ще одна дірка в доступності масок від Filament Group.

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