Formater Inngangsfelt automatisk med Cleave.js
Tenk på alle de forskjellige innsatsfeltene som krever en formatert struktur. Telefonnumre, kredittkort, fødselsdatoer, gateadresser ... de har alle sine egne unike mønstre.
Det er lett nok å forlate disse feltene alene og stole på brukeren. Men det kan være bedre å bruke Cleave.js, en gratis vanilj JavaScript plugin å hjelpe deg formater automatisk innfeltfelt.
HTML5 kommer med sin eget sett med innganger relatert til datamønstre for eksempel telefonnumre. Med Cleave kan du ta dette til neste nivå med tilpassede innganger at formatere tekst automatisk som det er skrevet.
Som standard støtter plugin-modulen Fem grunnleggende tekstmønstre:
- Kredittkortsnumre
- Telefonnummer
- datoer
- Numerisk styling (med kommaer)
- Egendefinerte inntaksfelt
Det siste valget er den kuleste, fordi du kan lage din Egendefinerte datamønstre fra grunnen av. Cleave tvinge deg ikke til å følge noen streng metodikk.
I stedet gir den deg verktøyene til bygge dine egne innganger med valgfri støtte for React og Angular komponenter. Den støtter også alle de store nettleserne og bør samsvare med støtte for eldre nettlesere sammen med jQuery.
Merk dette er ikke et tøft plugin for å sette opp. Du mål uansett ID eller klasse du har på ditt inntastingsfelt og send det til en ny Cleave-forekomst. Her er en prøvebit:
var cleave = ny Cleave ('. input-phone', telefon: true, phoneRegionCode: 'country'); Men mens Cleave kan være lett å sette opp, har den mange tilpassede funksjoner du kan leke med.
Alt dokumentasjonen er vert i repo, så du må bla gjennom GitHub siden til finn alle de forskjellige metodene og alternativene. Spesielt, den alternativ side har mye å gå gjennom, og det kan ta litt tid å finne det du vil ha.
Heldigvis har Cleave masse levende eksempler du kan studere og replikere. Disse eksemplene er også gratis å laste ned fra GitHub repo. Hvis du vil se flere levende eksempler besøk Cleave.js hjemmeside eller sjekk ut denne fienden syltetøy med demoer.
