Oblikujte polja za unos automatski s Cleave.js

Razmislite o svim različitim poljima za unos zahtijevaju formatiranu strukturu. Telefonski brojevi, kreditne kartice, datumi rođenja, adrese ... svi imaju svoje vlastite jedinstvene uzorke.

Dovoljno je jednostavno napustiti ova polja i pouzdati se u korisnika. Ali bolje je koristiti Cleave.js, besplatni JavaScript dodatak za vanilije pomoći ti automatski formatirati polja za unos.

HTML5 dolazi s oznakom vlastiti skup ulaznih podataka koji se odnose na obrasce podataka kao što su telefonski brojevi. Pomoću Cleave, možete to odnijeti na sljedeću razinu prilagođeni ulazi da automatski oblikovati tekst kako je upisano.

Prema zadanim postavkama dodatak podržava pet osnovnih tekstualnih uzoraka:

1. Brojevi kreditnih kartica
2. Brojevi telefona
3. datumi
4. Brojčani stil (sa zarezima)
5. Prilagođena polja za unos

Taj posljednji izbor je najhladniji jer možete napraviti svoj vlastiti uzorci podataka od nule. Cleave vas ne prisiljava da slijedite strogu metodologiju.

Umjesto toga, on vam daje alate izgradite vlastite ulaze s opcionalna podrška za komponente React i Angular. Također podržava svi glavni preglednici i treba odgovarati podršci za stariji preglednici zajedno s jQuery.

Imajte na umu da to nije težak dodatak za postavljanje. Vas ciljati bez obzira na ID ili klasu koju imate na vašem polju za unos i proslijedite to u novu instancu Cleave. Evo primjera isječka:

 var cleave = new Cleave ('. ulaz-telefon', telefon: true, phoneRegionCode: 'country'); 

Međutim, dok je Cleave lako postaviti, ima mnogo prilagođenih značajki možeš se igrati.

Sva dokumentacija je domaćin unutar repoa, tako da ćete morati pregledavati GitHub stranicu pronaći sve različite metode i opcije. Naime, stranica s opcijama ima puno toga za proći i može potrajati dok ne pronađe ono što želite.

Srećom, Cleave ima mnogo živih primjera možete učiti i replicirati. Ovi primjeri su također besplatno preuzeti iz GitHub repoa. Ako želite vidjeti više živih primjera posjetiti Početna stranica Cleave.js ili odjavite ovu guslu puna demo snimaka.