Automaticky formátovat vstupní pole pomocí Cleave.js
Přemýšlejte o všech různých vstupních polích, která vyžadují formátovanou strukturu. Telefonní čísla, kreditní karty, data narození, adresy ulic… všechny mají své vlastní jedinečné vzory.
Je snadné ponechat tato pole sama a důvěřovat uživateli. Ale bylo by lepší použít Cleave.js, A zdarma vanilla JavaScript plugin pomoct ti automaticky formátovat vstupní pole.
HTML5 přichází s jeho vlastní soubor vstupů souvisejících se vzory dat telefonní čísla. S Cleave, můžete si to na další úroveň s přizpůsobené vstupy že automaticky formátovat text jak je napsáno.
Standardně plugin podporuje pět základních textových vzorů:
- Čísla kreditních karet
- Telefonní čísla
- Termíny
- Číselný styling (s čárkami)
- Vlastní vstupní pole
Tato poslední volba je ta nejlepší, protože si můžete udělat svůj vlastní vzory dat od nuly. Cleave vás nevynucuje dodržovat přísnou metodiku.
Místo toho vám dává nástroje budovat své vlastní vstupy s volitelná podpora pro komponenty React a Angular. Podporuje také všechny hlavní prohlížeče a měla by odpovídat podpoře pro starších prohlížečů spolu s jQuery.
Nezapomeňte, že to není těžké nastavení. Vy zaměřte se na jakékoli ID nebo třídu, kterou máte na vstupním poli a předat do nové instance Cleave. Zde je ukázkový fragment:
var cleave = new Cleave ('. input-phone', telefon: true, phoneRegionCode: 'country'); Nicméně, zatímco Cleave může být snadné nastavit, má mnoho vlastních funkcí můžete hrát s.
Veškerá dokumentace je uvnitř repo, takže budete muset procházet stránku GitHub najít všechny různé metody a možnosti. Konkrétně stránky možností má hodně projít a může chvíli trvat, než najdete to, co chcete.
Naštěstí má Cleave spousta živých příkladů můžete studovat a kopírovat. Tyto příklady jsou také ke stažení zdarma z repo GitHub. Pokud chcete vidět více živých příkladů navštivte Domovská stránka Cleave.js nebo se podívejte toto housle zabalené s ukázkami.
