Formatta automaticamente i campi di input con Cleave.js

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

È abbastanza semplice lasciare questi campi da soli e fidarsi dell'utente. Ma potrebbe essere meglio da usare Cleave.js, un plug-in JavaScript gratuito di vaniglia per aiutarti formatta automaticamente i campi di input.

HTML5 viene fornito con il suo proprio insieme di input relativi ai modelli di dati come i numeri di telefono. Con Cleave, puoi portare questo al livello successivo con input personalizzati quello formattare automaticamente il testo come è stato digitato.

Di default, il plugin supporta cinque modelli 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 fare la tua possedere modelli di dati personalizzati da zero. Cleave non ti obbliga a seguire alcuna metodologia rigorosa.

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

Nota che questo non è un plugin difficile da configurare. tu scegli come target ID o classe che hai sul tuo campo di input e passalo 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, lo è un sacco di funzioni personalizzate puoi giocare con.

Tutta la documentazione è ospitato all'interno del repository, quindi dovrai sfogliare la pagina GitHub su trova tutti i diversi metodi e opzioni. In particolare, il 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 puoi studiare e replicare. Questi esempi sono anche da scaricare gratuitamente dal repository GitHub. Se vuoi vedere più esempi dal vivo visitare il Home page di Cleave.js o controllare questo violino pieno zeppo di demo.