Formatuj pola wejściowe automatycznie za pomocą Cleave.js
Pomyśl o wszystkich różnych polach wejściowych wymagają sformatowanej struktury. Numery telefonów, karty kredytowe, daty urodzenia, adresy… wszyscy mają swoje własne unikalne wzory.
Łatwo jest zostawić te pola w spokoju i zaufać użytkownikowi. Ale może być lepiej użyć Cleave.js, za darmowa wtyczka JavaScript w języku waniliowym pomóc Ci automatycznie formatuje pola wprowadzania.
HTML5 pochodzi z jego własny zestaw danych wejściowych związanych ze wzorcami danych takie jak numery telefonów. Z Cleave możesz przejść do następnego poziomu niestandardowe wejścia że automatycznie formatuje tekst jak jest wpisane.
Domyślnie wtyczka obsługuje pięć podstawowych wzorów tekstu:
- Numery kart kredytowych
- Numery telefoniczne
- Daktyle
- Styl numeryczny (z przecinkami)
- Niestandardowe pola wprowadzania
Ten ostatni wybór jest najfajniejszy, ponieważ możesz zrobić swój własne niestandardowe wzorce danych od podstaw. Cleave nie zmusza Cię do stosowania ścisłej metodologii.
Zamiast tego daje narzędzia do budować własne nakłady z opcjonalna obsługa komponentów React i Angular. Obsługuje również wszystkie główne przeglądarki i powinien pasować do wsparcia dla starsze przeglądarki wraz z jQuery.
Zauważ, że nie jest to trudna do skonfigurowania wtyczka. ty celuj niezależnie od posiadanego identyfikatora lub klasy w polu wprowadzania i przekaż to do nowej instancji Cleave. Oto przykładowy fragment:
var cleave = new Cleave ('. input-phone', phone: true, phoneRegionCode: 'country'); Jednak, podczas gdy Cleave może być łatwy do skonfigurowania, ma wiele niestandardowych funkcji możesz się bawić.
Cała dokumentacja jest hostowane w repo, więc musisz przeglądać stronę GitHub na znajdź wszystkie różne metody i opcje. W szczególności strona opcji ma dużo do przejścia i może zająć trochę czasu, aby znaleźć to, co chcesz.
Na szczęście Cleave ma mnóstwo przykładów na żywo możesz się uczyć i powielać. Te przykłady są również bezpłatnie pobrać z repo GitHub. Jeśli chcesz zobaczyć więcej przykładów na żywo odwiedzić Strona główna Cleave.js lub sprawdź to skrzypce wypełnione demami.
