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