Автоматически форматируйте поля ввода с Cleave.js
Подумайте обо всех различных полях ввода, которые требуется отформатированная структура. Номера телефонов, кредитные карты, даты рождения, адреса улиц ... все они имеют свои собственные уникальные модели.
Достаточно просто оставить эти поля в покое и довериться пользователю. Но может быть лучше использовать Cleave.js, бесплатный ванильный плагин JavaScript чтобы помочь вам автоматически форматировать поля ввода.
HTML5 поставляется с собственный набор входных данных, связанных с шаблонами данных такие как телефонные номера. С Cleave, вы можете перейти на следующий уровень с индивидуальные входы тот автоматически форматировать текст как это напечатано.
По умолчанию плагин поддерживает пять основных текстовых шаблонов:
- Номера кредитных карт
- Телефонные номера
- Даты
- Числовой стиль (с запятыми)
- Пользовательские поля ввода
Этот последний выбор самый крутой, потому что вы можете сделать свой собственные шаблоны данных с нуля. Клив не заставляет вас следовать какой-либо строгой методологии.
Вместо этого он дает вам инструменты для создать свой собственный вход с дополнительная поддержка компонентов React и Angular. Также поддерживает все основные браузеры и должен соответствовать поддержке устаревшие браузеры вместе с JQuery.
Обратите внимание, что это не сложный плагин для настройки. Вы выбрать любой идентификатор или класс на вашем поле ввода и передать это в новый экземпляр Cleave. Вот образец фрагмента:
var cleave = new Cleave ('. input-phone', phone: true, phoneRegionCode: 'country'); Тем не менее, хотя Cleave может быть легко настроить, он имеет много пользовательских функций Вы можете играть с.
Вся документация размещен внутри репо, поэтому вам нужно просмотреть страницу GitHub, чтобы найти все различные методы и варианты. В частности, страница настроек есть много, чтобы пройти и может занять некоторое время, чтобы найти то, что вы хотите.
К счастью, Клив множество живых примеров Вы можете учиться и копировать. Эти примеры также бесплатно скачать из репозитория GitHub. Если вы хотите увидеть больше живых примеров посетить Cleave.js домашняя страница или проверить эта скрипка забитый демонстрациями.
