Formatuokite įvesties laukus automatiškai su „Cleave.js“
Pagalvokite apie visus skirtingus įvesties laukus reikalaujama suformatuota struktūra. Telefono numeriai, kreditinės kortelės, gimimo datos, gatvės adresai… jie visi turi savo savo unikalius modelius.
Tai gana paprasta palikti šiuos laukus vien tik ir pasitikėti vartotoju. Bet tai gali būti geriau naudoti Cleave.js, a nemokamas vanilės „JavaScript“ papildinys padėti tau automatiškai formatuoti įvesties laukus.
HTML5 ateina su savo savo duomenų rinkinį, susijusį su duomenų modeliais pavyzdžiui, telefono numerius. Su „Cleave“ galite perkelti į kitą lygį pritaikyti įėjimai kad automatiškai formatuoti tekstą kaip tai įvedama.
Pagal numatytuosius nustatymus įskiepiai palaiko penki pagrindiniai teksto modeliai:
- Kredito kortelių numeriai
- Telefono numeriai
- Datos
- Skaitmeninis stilius (su kableliais)
- Pasirinktiniai įvesties laukai
Šis paskutinis pasirinkimas yra pats geriausias, nes galite padaryti savo savo pasirinktinius duomenų modelius nuo nulio. Cleave nepriverčia jus laikytis griežtos metodikos.
Vietoj to ji suteikia jums įrankius sukurti savo įvestį su neprivaloma reakcija į „React“ ir „kampinius“ komponentus. Ji taip pat palaiko visos pagrindinės naršyklės ir turėtų suderinti paramą senesnės naršyklės kartu su jQuery.
Atkreipkite dėmesį, kad tai nėra sudėtingas įskiepis. Tu nukreipti bet kokį ID ar klasę įvesties lauke ir perduoti jį į naują Cleave pavyzdį. Štai pavyzdžio fragmentas:
var cleave = new Cleave ('. input-phone', telefonas: tiesa, phoneRegionCode: 'country'); Tačiau, nors Cleave gali būti lengva nustatyti, ji turi daug pasirinktinių funkcijų galite žaisti su.
Visi dokumentai yra repo viduje, todėl jums reikės naršyti „GitHub“ puslapyje rasti visus skirtingus metodus ir parinktis. Konkrečiai, parinkčių puslapis turi daug ką nuveikti ir gali užtrukti, kol norite rasti tai, ko norite.
Laimei, Cleave turi daug gyvų pavyzdžių galite mokytis ir pakartoti. Šie pavyzdžiai taip pat yra nemokamai atsisiųsti iš „GitHub“ repo. Jei norite pamatyti daugiau gyvų pavyzdžių apsilankykite Cleave.js pagrindinis puslapis arba patikrinkite šis smuikas užstrigo demo.
