Voer de invoervelden automatisch in met Cleave.js
Denk aan alle verschillende invoervelden die een opgemaakte structuur vereisen. Telefoonnummers, creditcards, geboortedata, straatadressen ... ze hebben allemaal hun eigen unieke patronen.
Het is gemakkelijk genoeg om deze velden met rust te laten en de gebruiker te vertrouwen. Maar het is misschien beter om te gebruiken Cleave.js, een gratis vanille JavaScript plug-in om je te helpen automatisch invoervelden opmaken.
HTML5 wordt geleverd met zijn eigen reeks ingangen gerelateerd aan gegevenspatronen zoals telefoonnummers. Met Cleave kun je dit naar het volgende niveau brengen aangepaste ingangen dat automatisch tekst opmaken zoals het is getypt.
Standaard ondersteunt de plug-in vijf basis tekstpatronen:
- Creditcardnummers
- Telefoonnummers
- data
- Numerieke vormgeving (met komma's)
- Aangepaste invoervelden
Die laatste keuze is de coolste omdat je jouw kunt maken eigen aangepaste datapatronen helemaal opnieuw. Cleave dwingt je niet om een strikte methodiek te volgen.
In plaats daarvan geeft het je de tools om bouw je eigen inputs met optionele ondersteuning voor React- en hoekcomponenten. Het ondersteunt ook alle belangrijke browsers en moet ondersteuning afstemmen op oudere browsers samen met jQuery.
Let op dit is geen moeilijke plug-in om in te stellen. U Richt op elke ID of klasse die je hebt op uw invoerveld en geef dat door aan een nieuwe Cleave-instantie. Hier is een voorbeeldfragment:
var cleave = new Cleave ('. input-phone', phone: true, phoneRegionCode: 'country'); Hoewel Cleave misschien gemakkelijk te installeren is, is dat wel zo veel aangepaste functies je kunt spelen met.
Alle documentatie is gehost in de repo, dus je moet naar de GitHub-pagina gaan vind alle verschillende methoden en opties. In het bijzonder, de optiespagina heeft veel om doorheen te gaan en kan een tijdje duren om te vinden wat je wilt.
Gelukkig heeft Cleave dat gedaan veel live voorbeelden je kunt studeren en repliceren. Deze voorbeelden zijn ook gratis te downloaden van de repo van GitHub. Als je wilt zien meer live voorbeelden bezoek de Cleave.js startpagina of uitchecken deze viool boordevol demo's.
