Corsi on-line

Formattare campi di input con CleaveJS

CleaveJS è un’interessante soluzione basata su JavaScript per la formattazione dei contenuti presenti nei campi di input; la caratteristica più rilevante di questa libreria sta nel fatto che essa agisce in tempo reale, nel corso della digitazione, è infatti in grado di intercettare alcune peculiarità di ciò che viene inserito nei campi dando luogo a degli eventi conseguenti.

cleavejs

Lo scopo di questo progetto è quello di fornire una modalità quanto più semplice possibile per incrementare la leggibilità dei campi di input attraverso la formattazione dei dati che sono destinati a contenere; tale risultato diventa ottenibile senza dover ricorrere a complesse espressioni regolari o pattern. Chiaramente sarà sempre necessario utilizzare uno strumento a corredo per la validazione dei parametri, CleaveJS non si occupa infatti di questo aspetto.

Per utilizzare la libreria la si potrà installare tramite npm o altre package manager come bower:

npm install --save cleave.js
bower install --save cleave.js

Fatto questo si potrà passare all’inclusione nella pagina Web del proprio progetto:

<script src="cleave.min.js"></script>

E’ supportata la formattazione di numeri di carta di credito, recapiti telefonici, date e valori numerici puri. CleaveJS potrà essere utilizzata come componente per la realizzazione di interfacce utente basate sul framework ReactJS e in associazione con AngularJS. L’esempio presentato nella figura successiva mostra la libreria in azione, è stato sufficiente digitare i primi 4 numeri di una carta di credito perché CleaveJS capisse che si trattava di un prodotto della Mastercard:

cattura

Di seguito un secondo esempio basato sulla formattazione delle date, dove lo slash viene aggiunto automaticamente dalla libreria mentre le si sta digitando:

cattura

Infine, un esempio basato sulla formattazione dei valori numerici dove in presenza di un numero non decimale superiore alle 4 cifre viene aggiunto automaticamente un separatore sotto forma di virgola:

cattura

Naturalmente l’utilizzatore avrà la possibilità di personalizzare formattazione e separatori sulla base delle proprie esigenze.

Via CleaveJS

Post correlati
I più letti del mese
Tematiche