Jak utworzyć prosty wybór numeru telefonu
Numery telefoniczne, Oprócz nazw i e-maili są najczęściej używanymi informacjami kontaktowymi w formularzach online. Pola numeru telefonu są zazwyczaj zaprojektowane w sposób, który wymaga od użytkowników wpisywania numerów przy użyciu klawiatur. Ta metoda często powoduje niedokładne wprowadzanie danych.
Do zmniejszyć błędy wprowadzane przez użytkownika i poprawić wrażenia użytkownika na swojej stronie, możesz stworzyć GUI Dzięki temu użytkownicy mogą szybko wprowadzić swój numer telefonu w sposób podobny do zbierania dat.
W tym samouczku zobaczysz, jak to zrobić dodaj prosty pole wyboru numeru telefonu do pola wprowadzania. Użyjemy HTML5, CSS3 i JavaScript, aby przejść do GUI, które możesz zobaczyć i przetestować w poniższym demo. Użyjemy również wyrażeń regularnych, aby upewnić się, że użytkownicy naprawdę wprowadzają prawidłowy numer telefonu.
1. Utwórz pole numeru telefonu
Pierwszy, utwórz pole wejściowe z ikoną wybierania po prawej stronie, która otworzy ekran wybierania po kliknięciu. Ikona wybierania wygląda jak 9 czarnych skrzynek, ułożonych 3 na 3, musi podobać się do tego, co widzisz na zwykłym telefonie.
Używam tel typ wejścia dla właściwej semantyki HTML5, ale możesz także użyć tekst wpisz typ, jeśli chcesz.
2. Utwórz ekran wybierania
The ekran wybierania jest siatka liczb od 0 do 9 plus kilka znaków specjalnych. Można to zrobić za pomocą albo HTML Tutaj pokażę, jak utworzyć tabelę ekranu wybierania w JavaScript. Możesz oczywiście dodać tabelę bezpośrednio w kodzie źródłowym HTML, jeśli wolisz w ten sposób. Najpierw utwórz nowy Dodać Dwójka Ostatni wiersz jest inny, ponieważ składa się z dwa znaki specjalne, Aby utworzyć ostatni wiersz na ekranie wybierania, dodaj poniższe The ekran wybierania jest teraz zakończony, dodaj to do Aby uczynić go bardziej atrakcyjnym, stylizuj ekran wybierania z CSS. Nie musisz koniecznie trzymać się mojej stylizacji, ale nie zapomnij Dodaj Najpierw dodaj Następnie dodaj procedurę obsługi zdarzenia kliknięcia do ikony wybierania z JavaScriptem do przełącz widoczność ekranu wybierania. Aby to zrobić, musisz użyć wyżej wspomnianego The Dodaj funkcję niestandardową, która wprowadza cyfry do pola numeru telefonu na kliknięcie komórek ekranu wybierania. The Teraz masz ekran roboczy tarczy aby wprowadzić pole numeru telefonu. Aby nadążyć za CSS, zmień kolor tła cyfr w ich Dodać prosta weryfikacja wyrażeń regularnych aby zweryfikować numer telefonu, gdy użytkownik wprowadza cyfry do pola wprowadzania. Zgodnie z regułami walidacji, których używam, numer telefonu może zaczynać się tylko cyfrą lub cyfrą Możesz zobaczyć wizualizację mojego wyrażenia regularnego na poniższym pokazie ekranów utworzonym za pomocą aplikacji Debuggex. Możesz również zweryfikować numer telefonu zgodnie z formatem numeru telefonu w swoim kraju lub regionie. Utwórz nowy obiekt wyrażenia regularnego i zapisz go w Gdy dane wejściowe nie sprawdzają poprawności, Jestem dodając czerwoną ramkę do pola wejściowego, gdy wejście jest nieprawidłowe, ale można poinformować użytkownika na inne sposoby, na przykład za pomocą komunikatów o błędach. The Zauważ, że dodałem także dodatkowa walidacja dla maksymalnych postaci (nie może być więcej niż 15) za pomocą Twój wybór numeru telefonu jest teraz gotowy, sprawdź ostatnie demo poniżej. lub JavaScript.
'stół' element w DOM za pomocą createElement () metoda. Daj mu też 'Wybierz' identyfikator. / * Utwórz ekran wybierania * / var dial = document.createElement („tabela”); dial.id = 'dial';
dla pętla włożyć do niego cztery rzędy stołu wybierania. Następnie dla każdego wiersza, uruchomić inny dla pętla w celu dodania trzech komórek na wiersz. Zaznacz każdą komórkę z „dialDigit” klasa. for (var rowNum = 0; rowNum < 4; rowNum++) var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++) var cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
dla Pętle powyżej obliczają cyfry wchodzące do komórek tabeli wybierania - wartości cell.textContent własność - w następujący sposób: (colNum + 1) + (rowNum * 3) / * pierwszy wiersz * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + ( 0 * 3) = 3 / * drugi rząd * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * itd. * /
- i + używane w formatach numerów telefonów do identyfikacji kodów regionalnych i cyfry 0.Jeśli oświadczenie do wewnętrznego dla pętla. for (var rowNum = 0; rowNum < 4; rowNum++) var row = dial.insertRow(rowNum); for (var colNum = 0; colNum < 3; colNum++) /* if last row */ if (rowNum === 3) cell = row.insertCell(colNum); cell.textContent = '-'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '0'; cell.className = 'dialDigit'; cell = row.insertCell(colNum); cell.textContent = '+'; cell.className = 'dialDigit'; break; cell = row.insertCell(colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)).toString();
#dialWrapper Kontener HTML utworzony w kroku 1 za pomocą dwie metody DOM:querySelector () metoda do wybierz pojemnikappendChild () metoda do dołącz ekran wybierania - odbyło się w Wybierz zmienna - do kontenera document.querySelector ('# dialWrapper'). appendChild (dial); 
3. Styluj ekran wybierania
user-select: none; własność do #Wybierz pojemnik aby użytkownik klikał cyfry, tekst nie zostanie wybrany przez kursor. #dial width: 200px; wysokość: 200px; border-collapse: collapse; wyrównywanie tekstu: środek; pozycja: względna; -ms-user-select: brak; -webkit-user-select: brak; -moz-user-select: brak; user-select: none; kolor: # 000; box-shadow: 0 0 6px # 999; .dialDigit border: 1px solid #fff; cursor: pointer; kolor tła: rgba (255,228,142, .7);
4. Pokaż ekran wybierania po kliknięciu
widoczność: ukryta; reguła stylu #Wybierz w powyższym CSS do ukryj ekran wybierania domyślnie. będzie wyświetlana tylko wtedy, gdy użytkownik kliknie ikonę wybierania numeru.querySelector () i addEventListener () metody. Ten ostatni dołącza zdarzenie kliknięcia do ikony wybierania i wywołuje zwyczaj toggleDial () funkcjonować.toggleDial () funkcjonować zmienia widoczność ekranu wybierania z ukrytego do widocznego iz powrotem. document.querySelector ('# dialIcon'). addEventListener ('click', toggleDial); funkcja toggleDial () dial.style.visibility = dial.style.visibility === 'hidden' || dial.style.visibility === "?" widoczny ":" ukryty "; 5. Dodaj funkcjonalność
wybrać numer() funkcjonować dodaje cyfry jedna po drugiej do textContent właściwość pola wejściowego oznaczonego symbolem #nr telefonu identyfikator. phoneNo = document.querySelector ('# phoneNo'); function dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ('. dialDigit'); for (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); :wahać się i :aktywny (gdy użytkownik go kliknie) stwierdza. .dialDigit: hover background-color: rgb (255,228,142); .dialDigit: active background-color: # FF6478;
6. Dodaj walidację wyrażenia regularnego
+ postać i zaakceptuj - postać później.
wzór zmienna. Stwórz także niestandardowy uprawomocnić() funkcja, która sprawdza, czy wprowadzony numer telefonu jest zgodny z wyrażeniem regularnym, i jeśli to jest co najmniej 8 znaków.uprawomocnić() funkcja musi zostaw opinię do użytkownika. pattern = new RegExp ("^ (+ d 1,2)? (d + - - d +) * $"); function validate (txt) // co najmniej 8 znaków dla prawidłowego numeru telefonu if (! pattern.test (txt) || txt.length < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Wykonaj walidację
uprawomocnić() Funkcje musi zostać wywołany w celu przeprowadzenia walidacji. Nazwij to z wybrać numer() funkcję utworzoną w kroku 5 w celu sprawdzenia poprawności wartości nr telefonu zmienna.Jeśli komunikat. function dialNumber () var val = phoneNo.value + this.textContent; // maksymalne dozwolone znaki, 15 jeśli (val.length> 15) zwracają false; validate (val); phoneNo.value = val;
