Formatējiet ievades laukus automātiski, izmantojot Cleave.js
Padomājiet par visiem dažādajiem ievades laukiem nepieciešama formatēta struktūra. Tālruņa numuri, kredītkartes, dzimšanas datumi, ielas adreses… viņiem visiem ir savs pašiem unikāliem modeļiem.
Pietiekami vienkārši ir atstāt šos laukus atsevišķi un uzticēties lietotājam. Bet tas varētu būt labāk izmantot Cleave.js, a bezmaksas vaniļas JavaScript spraudnis palidzet tev automātiski formatēt ievades laukus.
HTML5 nāk ar tās pašu datu kopumu, kas saistīts ar datu modeļiem piemēram, tālruņa numurus. Ar Cleave varat to uzņemt līdz nākamajam līmenim pielāgotus datus to automātiski formatē tekstu kā tas ir ievadīts.
Pēc noklusējuma spraudnis atbalsta pieci pamata teksta modeļi:
- Kredītkaršu numuri
- Tālruņa numuri
- Datumi
- Ciparu stils (ar komatiem)
- Pielāgoti ievades lauki
Šī pēdējā izvēle ir stilīgākā, jo jūs varat padarīt savu savi pielāgoti datu modeļi no nulles. Cleave neuzliek jums pienākumu ievērot stingru metodiku.
Tā vietā jums ir pieejami rīki veidojiet savus ieguldījumus ar papildu atbalsts reakcijas un leņķa komponentiem. Tā arī atbalsta visas galvenās pārlūkprogrammas un jāatbilst atbalstam pārlūkprogrammas kopā ar jQuery.
Ņemiet vērā, ka tas nav grūts spraudnis. Jūs mērķēt neatkarīgi no ID vai klases, kas jums ir jūsu ievades laukā un nodot to jaunā Cleave instancē. Šeit ir parauga fragments:
var cleave = new Cleave ('. input-phone', tālrunis: true, phoneRegionCode: 'country'); Tomēr, lai gan Cleave var būt viegli uzstādīt, tā ir daudz pielāgotu funkciju jūs varat spēlēt ar.
Visi dokumenti ir repo, tāpēc jums būs nepieciešams pārlūkot GitHub lapu atrast visas dažādas metodes un iespējas. Konkrēti, opciju lapa ir daudz, lai iet cauri, un var paiet laiks, lai atrastu to, ko vēlaties.
Par laimi, Cleave ir daudz dzīvu piemēru jūs varat mācīties un atkārtot. Šie piemēri ir arī brīvi lejupielādēt no GitHub repo. Ja vēlaties redzēt vairāk dzīvu piemēru apmeklējiet Cleave.js mājas lapa vai izbraukšana šī vijole ievainots ar demo.
