Vormindage sisendväljad automaatselt Cleave.js-iga
Mõtle kõikidele erinevatele sisendväljadele nõuavad vormindatud struktuuri. Telefoninumbrid, krediitkaardid, sünnikuupäevad, tänava aadressid… neil kõigil on oma oma unikaalsed mustrid.
Nende valdkondade lahkumine ja kasutaja usaldamine on lihtne. Aga see võib olla parem kasutada Cleave.js, a tasuta vanilje JavaScript plugin sind aidata automaatselt sisendusväljad.
HTML5 on kaasas andmete kogumiga seotud sisendite kogum näiteks telefoninumbrid. Cleave'iga saate selle järgmisele tasemele viia kohandatud sisendid seda teksti automaatselt vormindamine kui see on kirjutatud.
Vaikimisi toetab plugin viis põhiteksti:
- Krediitkaardi numbrid
- Telefoninumbrid
- Kuupäevad
- Numbriline stiil (komadega)
- Kohandatud sisestusväljad
See viimane valik on kõige lahedam, sest saate oma oma kohandatud andmemustreid nullist. Cleave ei sunni teid järgima ranget metoodikat.
Selle asemel annab see teile tööriistad ehitada oma sisendid koos valikuline tugi React ja Angular komponentidele. Samuti toetab see kõik suuremad brauserid ja peaks toetama vanemad brauserid koos jQuery.
Pange tähele, et see ei ole raske pistikprogramm. Sina sihtige olenemata ID-st või klassist sisendväljal ja edastage see uude Cleave'i näiteks. Siin on proovi fragment:
var cleave = new Cleave ('. input-phone', telefon: true, phoneRegionCode: 'country'); Kuigi Cleave'i võib olla lihtne seadistada, on sellel siiski palju kohandatud funktsioone saate mängida.
Kõik dokumendid on repo sees, nii peate GitHubi lehele sirvima leidke kõik erinevad meetodid ja valikud. Täpsemalt, valikute lehel tal on palju, mida teha, ja võib vajaliku aja leidmiseks aega võtta.
Õnneks on Cleave'il palju elavaid näiteid saate õppida ja korrata. Need näited on ka tasuta alla laadida alates GitHub repost. Kui soovite seda näha rohkem elavaid näiteid külastage Cleave.js kodulehekülg või vaadake see viiul demosid täis.
