Автоматично форматувати поля введення з Cleave.js
Подумайте про всі різні поля введення вимагають форматовану структуру. Номери телефонів, кредитні картки, дати народження, адреси вулиць ... всі вони мають свої власні унікальні візерунки.
Достатньо просто залишити ці поля і довіряти користувачеві. Але краще використовувати Cleave.js, a безкоштовний плагін ванільного JavaScript щоб допомогти вам автоматично форматувати поля введення.
HTML5 поставляється з його власний набір входів, пов'язаних з шаблонами даних такі як телефонні номери. За допомогою Cleave можна перейти до наступного рівня індивідуальні входи що автоматично форматувати текст як набрано.
За замовчуванням плагін підтримує п'ять основних текстових шаблонів:
- Номери кредитних карт
- Номери телефонів
- Дати
- Цифровий стиль (із комами)
- Власні поля введення
Цей останній вибір - найхолодніший, тому що ви можете зробити свій власні шаблони даних з нуля. Cleave не змушує вас дотримуватися будь-якої суворої методології.
Замість цього він надає вам інструменти будувати власні вхідні дані с необов'язкова підтримка компонентів React і Angular. Він також підтримує всі основні браузери і має відповідати підтримці попередні браузери разом з jQuery.
Зауважте, що це не жорсткий плагін для налаштування. ти цілеспрямований будь-який ідентифікатор чи клас у полі вводу та передайте це у новий екземпляр Cleave. Нижче наведено зразок фрагмента:
var cleave = new Cleave ('. input-phone', phone: true, phoneRegionCode: 'country'); Однак, в той час як Cleave може бути легко налаштована, вона має багато спеціальних функцій ви можете пограти.
Вся документація є розміщено всередині репо, щоб переглядати сторінку GitHub знайти всі різні методи та параметри. Зокрема опцій має багато чого пройти і може знадобитися деякий час, щоб знайти те, що ви хочете.
На щастя, Cleave має багато живих прикладів Ви можете вивчати і повторювати. Ці приклади також є безкоштовно завантажити від репо GitHub. Якщо ви хочете побачити більше живих прикладів відвідайте Домашня сторінка Cleave.js або перевірте ця скрипка забитий демо-версією.
