Formater indtastningsfelter automatisk med Cleave.js
Tænk på alle de forskellige inputfelter kræver en formateret struktur. Telefonnumre, kreditkort, fødselsdatoer, gadeadresser ... de har alle deres egne unikke mønstre.
Det er nemt nok at forlade disse felter alene og stole på brugeren. Men det kan være bedre at bruge Cleave.js, -en Gratis Vanilla JavaScript plugin at hjælpe dig formatér automatisk inputfelter.
HTML5 kommer med dens eget sæt af input relateret til datamønstre såsom telefonnumre. Med Cleave kan du tage dette til næste niveau med tilpassede input at formatér tekst automatisk som det er skrevet.
Som standard understøtter plugin'et Fem grundlæggende tekstmønstre:
- Kreditkortnumre
- Telefonnumre
- Datoer
- Numerisk styling (med kommaer)
- Brugerdefinerede inputfelter
Det sidste valg er den sejeste, fordi du kan lave din egne brugerdefinerede datamønstre fra bunden. Cleave tvinge dig ikke til at følge en streng metode.
I stedet giver det dig værktøjerne til bygg dine egne indgange med valgfri support til React og Angular komponenter. Det understøtter også alle større browsere og burde matche støtte til legacy browsere sammen med jQuery.
Bemærk, at dette ikke er et hårdt plugin til opsætning. Du mål uanset id eller klasse du har på dit indtastningsfelt og send det til en ny Cleave-instans. Her er et prøveuddrag:
var cleave = ny Cleave ('. input-phone', telefon: true, phoneRegionCode: 'country'); Men mens Cleave kan være let at oprette, har den en masse brugerdefinerede funktioner du kan legetøj med.
Al dokumentationen er hostet inde i repo, så du skal gennemse GitHub-siden til Find alle de forskellige metoder og muligheder. Specifikt, den options side har meget at gå igennem og måske tage et stykke tid for at finde hvad du vil have.
Heldigvis har Cleave masser af levende eksempler du kan studere og replikere. Disse eksempler er også gratis at downloade fra GitHub repo. Hvis du vil se flere levende eksempler besøge Cleave.js startside eller tjek denne fidle syltetøj med demoer.
