Formați câmpurile de introducere automat cu Cleave.js
Gândiți-vă la toate câmpurile de intrare diferite necesită o structură formatată. Numerele de telefon, cardurile de credit, datele de naștere, adresele stradale ... toate au propriile lor modele proprii unice.
Este destul de ușor să lăsați aceste câmpuri în pace și să aveți încredere în utilizator. Dar ar fi mai bine să o folosiți Cleave.js, A free vanilla JavaScript plugin sa te ajut să formateze automat câmpurile de introducere.
HTML5 vine cu versiunea sa set propriu de intrări legate de modele de date cum ar fi numerele de telefon. Cu Cleave, poți să te duci la nivelul următor intrări personalizate acea formatarea automată a textului așa cum este scris.
Implicit, pluginul acceptă cinci modele de text de bază:
- Numerele cărților de credit
- Numere de telefon
- Datele
- Stilul numeric (cu virgule)
- Câmpuri de introducere personalizate
Această ultimă alegere este cea mai tare, pentru că vă puteți face propriile modele personalizate de date de la zero. Cleave nu te obligă să urmezi o metodologie strictă.
În schimb, vă oferă instrumentele necesare construiți propriile dvs. intrări cu suport opțional pentru componentele React și Angular. De asemenea, sprijină toate browserele importante și ar trebui să corespundă suportului pentru browserele moștenite impreuna cu jQuery.
Rețineți că acest lucru nu este un plugin greu de configurat. Tu vizați orice ID sau clasă pe care o aveți pe câmpul de intrare și pe treci asta într-o nouă instanță Cleave. Iată un fragment de probă:
var cleave = Cleave nou ('.put-phone', phone: true, phoneRegionCode: 'country'); Cu toate acestea, în timp ce Cleave poate fi ușor de configurat, are o mulțime de caracteristici personalizate cu care poți juca.
Toată documentația este găzduit în interiorul repo-ului, astfel încât va trebui să parcurgeți pagina GitHub la găsiți toate metodele și opțiunile diferite. Mai exact, pagina de opțiuni are multe de parcurs și ar putea dura ceva timp pentru a găsi ceea ce doriți.
Din fericire, Cleave a avut o multime de exemple live puteți studia și replica. Aceste exemple sunt, de asemenea gratuit pentru descărcare de la repo GitHub. Daca vrei sa vezi mai multe exemple live Viziteaza Pagina principală Cleave.js sau check out această vioară jam-packed cu demo-uri.
