Formatta automaticamente i campi di input con Cleave.js

Pensa a tutti i diversi campi di input che richiedono una struttura formattata . Numeri di telefono, carte di credito, date di nascita, indirizzi ... hanno tutti i loro modelli unici .

È abbastanza semplice lasciare questi campi da soli e fidarsi dell'utente. Ma potrebbe essere meglio usare Cleave.js, un plugin gratuito di vanilla JavaScript per aiutarti a formattare automaticamente i campi di input .

HTML5 viene fornito con una serie di input relativi a modelli di dati come numeri di telefono. Con Cleave, puoi portare questo al livello successivo con input personalizzati che formattano automaticamente il testo mentre viene digitato.

Di default, il plugin supporta cinque pattern di testo di base :

1. Numeri di carta di credito
2. Numeri di telefono
3. Date
4. Stile numerico (con virgole)
5. Campi di inserimento personalizzati

L'ultima scelta è la più bella perché puoi creare da zero i tuoi modelli di dati personalizzati . Cleave non ti obbliga a seguire alcuna metodologia rigorosa.

Invece, ti dà gli strumenti per costruire i tuoi input con il supporto opzionale per i componenti React e Angular . Supporta anche tutti i principali browser e deve corrispondere al supporto per i browser legacy insieme a jQuery .

Nota che questo non è un plugin difficile da configurare. Scegli come target ID o classe che hai sul campo di input e trasferiscilo in una nuova istanza di Cleave . Ecco uno snippet di esempio:

 var cleave = new Cleave ('. input-phone', {phone: true, phoneRegionCode: '{country}'}); 

Tuttavia, sebbene Cleave possa essere facile da configurare, ha un sacco di funzioni personalizzate con cui puoi giocare.

Tutta la documentazione è ospitata all'interno del repository, quindi è necessario sfogliare la pagina GitHub per trovare tutti i diversi metodi e opzioni . Nello specifico, la pagina delle opzioni ha molto da fare e potrebbe volerci un po 'per trovare quello che vuoi.

Per fortuna, Cleave ha un sacco di esempi dal vivo che puoi studiare e replicare. Questi esempi sono anche scaricabili gratuitamente dal repository GitHub. Se vuoi vedere altri esempi dal vivo visita la home page di Cleave.js o dai un'occhiata a questo fiddle pieno zeppo di demo.