Alusta syöttökentät automaattisesti Cleave.js n avulla
Ajattele kaikkia eri syöttökenttiä vaativat alustetun rakenteen. Puhelinnumerot, luottokortit, syntymäpäivät, katuosoitteet… niillä kaikilla on oma omia ainutlaatuisia kuvioita.
On helppo jättää nämä kentät yksin ja luottaa käyttäjään. Mutta se voi olla parempi käyttää Cleave.js, ilmainen vanilja-JavaScript-laajennus auttaa sinua muotoile syöttökentät automaattisesti.
HTML5: n mukana tulee omia tietomalleihin liittyviä panoksia kuten puhelinnumerot. Cleave-toiminnon avulla voit siirtyä seuraavaan tasoon räätälöityjä tuloja että muotoile tekstiä automaattisesti koska se on kirjoitettu.
Oletuksena plugin tukee viisi perusmallia:
- Luottokorttinumerot
- Puhelinnumerot
- päivämäärät
- Numeerinen muotoilu (pilkuilla)
- Mukautetut syöttökentät
Tämä viimeinen valinta on hienoin, koska voit tehdä oman omia mukautettuja tietomalleja tyhjästä. Cleave ei pakota sinua noudattamaan tiukkoja menetelmiä.
Sen sijaan se antaa sinulle työkalut rakentaa omia panoksia kanssa valinnainen tuki React- ja Angular-komponenteille. Se tukee myös kaikki tärkeimmät selaimet ja sen pitäisi vastata tukea vanhat selaimet kera jQuery.
Huomaa, että tämä ei ole vaikea asentaa. Sinä kohdista riippumatta ID: stä tai luokasta syöttökenttään ja siirrä se uuteen Cleave-instanssiin. Tässä on otospätkä:
var cleave = new Cleave ('. input-phone', puhelin: true, phoneRegionCode: 'country'); Kuitenkin, kun Cleave on helppo asentaa, se on paljon mukautettuja ominaisuuksia voit leikkiä.
Kaikki asiakirjat ovat repo, joten sinun täytyy selata GitHub-sivua löytää kaikki erilaiset menetelmät ja vaihtoehdot. Erityisesti asetukset on paljon mennä läpi ja saattaa kestää jonkin aikaa löytääksesi mitä haluat.
Onneksi Cleave on paljon eläviä esimerkkejä voit opiskella ja toistaa. Nämä esimerkit ovat myös vapaasti ladattavissa GitHub-reposta. Jos haluat nähdä enemmän live-esimerkkejä vieraile Cleave.js-kotisivu tai tarkista tämä viulu tukkeutunut demojen kanssa.
