Oblika vnosnih polj Samodejno z Cleave.js

Razmislite o vseh različnih poljih za vnos, ki zahtevajo oblikovano strukturo. Telefonske številke, kreditne kartice, datumi rojstva, naslovi ... vsi imajo svoje edinstvene vzorce.

Dovolj preprosto je zapustiti ta polja in zaupati uporabniku. Vendar je morda bolje uporabiti Cleave.js, a brezplačen plugin za vanilije JavaScript da vam pomagam samodejno oblikuje vnosna polja.

HTML5 prihaja s svojimi lastni vhodni podatki, povezani z vzorci podatkov telefonske številke. S funkcijo Cleave lahko to prenesete na naslednjo raven prilagojene vnose to samodejno oblikuje besedilo ko je vnešeno.

Privzeto podpira plugin pet osnovnih besedilnih vzorcev:

1. Številke kreditnih kartic
2. Telefonske številke
3. Datumi
4. Številska oblika (z vejicami)
5. Vnosna polja po meri

Zadnja izbira je najbolj kul, ker lahko narediš svojo lastne podatkovne vzorce iz nič. Cleave vas ne prisili, da sledite strogi metodologiji.

Namesto tega vam daje orodja gradite svoje vnose z opcijska podpora za komponente React in Angular. Podpira tudi vseh večjih brskalnikov in mora ustrezati podpori za starejši brskalniki skupaj z jQuery.

Upoštevajte, da to ni težko nastavljen. Ti ne glede na ID ali razred, ki ga imate na vnosnem polju in prenesite to v nov primer Cleave. Tukaj je vzorec odrezka:

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

Kljub temu, da je Cleave lahko nastavljiv, ga ima veliko funkcij po meri z njimi se lahko igrate.

Vsa dokumentacija je gostuje v repo, zato boste morali brskati po strani GitHub poiščite vse različne metode in možnosti. Natančneje strani z možnostmi mora preživeti veliko časa in vzeti nekaj časa, da bi našli tisto, kar želite.

Na srečo ima Cleave veliko živih primerov lahko se učite in razmnožujete. Ti primeri so tudi brezplačno prenesete od repo GitHub. Če želite videti več živih primerov obiščite Domača stran Cleave.js ali odjavite Ta violina z demoti.