Formatera inmatningsfält automatiskt med Cleave.js
Tänk på alla de olika inmatningsfälten som kräver en formaterad struktur. Telefonnummer, kreditkort, födelsedatum, gatuadresser ... de har alla sina egna unika mönster.
Det är lätt att lämna dessa fält ensamma och lita på användaren. Men det kan vara bättre att använda Cleave.js, en gratis vanilj JavaScript plugin att hjälpa dig Formatera automatiskt inmatningsfält.
HTML5 levereras med dess egen uppsättning ingångar relaterade till datamönster till exempel telefonnummer. Med Cleave kan du ta det här till nästa nivå med anpassade ingångar den där formatera automatiskt text som det är skrivet.
Som standard stöder pluginprogrammet fem grundläggande textmönster:
- Kreditkortsnummer
- Telefonnummer
- datum
- Numerisk styling (med kommatecken)
- Anpassade inmatningsfält
Det sista valet är den coolaste eftersom du kan göra din egna anpassade datamönster från början. Cleave tvingar dig inte att följa någon strikt metodik.
Istället ger den dig verktyg till bygg dina egna ingångar med valfritt stöd för React och Angular komponenter. Det stöder också alla större webbläsare och borde matcha stöd för äldre webbläsare tillsammans med jQuery.
Observera att detta inte är en tuff plugin för att ställa in. Du rikta oavsett ID eller klass du har på ditt inmatningsfält och överför det till en ny Cleave-instans. Här är ett provbit:
var cleave = ny Cleave ('. input-phone', telefon: true, phoneRegionCode: 'country'); Men medan Cleave kan vara lätt att installera, har den många anpassade funktioner du kan leka med.
All dokumentation är värd inom repo, så du behöver bläddra i GitHub-sidan till hitta alla olika metoder och alternativ. Specifikt alternativ sida har mycket att gå igenom och kan ta ett tag för att hitta vad du vill ha.
Tack och lov har Cleave gott om levande exempel du kan studera och replikera. Dessa exempel är också gratis att ladda ner från GitHub repo. Om du vill se mer levande exempel besök Cleave.js hemsida eller kolla in den här fiolen syltad med demo.
