Автоматически форматируйте поля ввода с Cleave.js

Подумайте обо всех различных полях ввода, которые требуют форматированной структуры. Номера телефонов, кредитные карты, даты рождения, адреса улиц … все они имеют свои уникальные шаблоны.

Достаточно легко оставить эти поля в покое и доверять пользователю. Но может быть лучше использовать Cleave.jsбесплатный плагин Vanilla JavaScript, чтобы помочь вам автоматически форматировать поля ввода.

Читайте также: 4 UX Design Form UX, которые вы должны знать (с примерами)

HTML5 поставляется с собственным набором входных данных, связанных с шаблонами данных, такими как телефонные номера. С Cleave вы можете перейти на следующий уровень с помощью настраиваемых вводов, которые автоматически форматируют текст по мере его ввода.

По умолчанию плагин поддерживает пять основных текстовых шаблонов:

1. Номера кредитных карт
2. Телефонные номера
3. Даты
4. Числовой стиль (с запятыми)
5. Пользовательские поля ввода

Последний вариант самый крутой, потому что вы можете создавать свои собственные шаблоны данных с нуля. Клив не заставляет вас следовать какой-либо строгой методологии.

Вместо этого он дает вам инструменты для создания ваших собственных входов с дополнительной поддержкой компонентов React и Angular. Он также поддерживает все основные браузеры и должен соответствовать поддержке устаревших браузеров вместе с jQuery.
Обратите внимание, что это не сложный плагин для настройки. Вы выбираете любой идентификатор или класс, который у вас есть, в поле ввода и передаете его в новый экземпляр Cleave. Вот пример фрагмента:

var cleave = new Cleave (‘. input-phone’, {
    телефон: правда,
    phoneRegionCode: ‘{страна}’
});

Однако, хотя Cleave может быть легко настроен, он имеет множество пользовательских функций, с которыми вы можете играть.

Вся документация размещена внутри репотак что вам нужно просмотреть страницу GitHub, чтобы найти все различные методы и опции. В частности, страница настроек есть много, чтобы пройти и может занять некоторое время, чтобы найти то, что вы хотите.

К счастью, у Клива есть много живых примеров, которые вы можете изучить и воспроизвести. Эти примеры также можно бесплатно скачать из репозитория GitHub, Если вы хотите увидеть больше примеров из жизни, посетите Cleave.js домашняя страница или проверить эта скрипка забитый демонстрациями.

Читайте также: Введение в проверку ограничений HTML5