Formátovať vstupné polia automaticky pomocou funkcie Cleave.js
Premýšľajte o všetkých rôznych vstupných poliach vyžaduje formátovanú štruktúru. Telefónne čísla, kreditné karty, dátumy narodenia, poštové adresy ... všetci majú svoje vlastné jedinečné vzory.
Je to jednoduché, aby ste tieto polia opustili a dôverovali používateľovi. Ale môže byť lepšie použiť Cleave.js, voľný vanilkový JavaScript plugin pomôcť ti automaticky formátovať vstupné polia.
HTML5 prichádza s jeho vlastný súbor vstupov týkajúcich sa dátových vzorov napríklad telefónne čísla. S programom Cleave môžete prejsť na ďalšiu úroveň prispôsobené vstupy že automaticky formátovať text ako je to zadané.
Predvolene podporuje doplnok päť základných textových vzorov:
- Čísla kreditných kariet
- Telefónne čísla
- Termíny
- Numerický styl (s čiarkami)
- Vlastné polia zadávania
Táto posledná voľba je najlepšia, pretože môžete urobiť svoje Vlastné vzory dát od začiatku. Cleave vás núti dodržiavať prísnu metodiku.
Namiesto toho vám dáva nástroje vytvorte vlastné vstupy s voliteľná podpora pre komponenty React a uhlové. Tiež podporuje všetky hlavné prehliadače a mala by zodpovedať podpore pre starších prehliadačov spolu s jQuery.
Všimnite si, že to nie je tvrdý doplnok na nastavenie. vy zamerať na akýkoľvek ID alebo triedu, ktoré máte na vstupnom poli a prejdite do novej funkcie Cleave. Tu je ukážkový úryvok:
var cleave = nový príkaz Cleave ('. vstupný telefón', phone: true, phoneRegionCode: 'country'); Avšak, zatiaľ čo Cleave môže byť jednoduché nastaviť, to má veľa vlastných funkcií s ktorými môžete hrať.
Celá dokumentácia je v repo, takže budete musieť prejsť na stránku GitHub nájsť všetky rôzne metódy a možnosti. Konkrétne stránka s voľbami má veľa prejsť a môže chvíľu trvať, kým nájdete to, čo chcete.
Našťastie, Cleave má veľa živých príkladov môžete študovať a replikovať. Tieto príklady sú tiež zadarmo k stiahnutiu z repo GitHub. Ak chcete vidieť viac živých príkladov navštíviť Domovská stránka Cleave.js alebo odhlásenie tejto husle uviaznuté s ukážkami.
