Cum de a crea un simplu număr de telefon Picker
Numere de telefon, pe lângă nume și e-mailuri, sunt cele mai frecvent utilizate informații de contact în formularele online. Câmpurile cu numere de telefon sunt, de obicei, proiectate într-un mod care necesită utilizatorii să introducă numerele utilizând tastatura lor. Această metodă duce frecvent la introducerea incorectă a datelor.
La reducerea erorilor de intrare ale utilizatorilor și pentru a îmbunătăți experiența utilizatorilor site-ului dvs., puteți crea o GUI care le permite utilizatorilor să introducă rapid numărul lor de telefon, într-un mod similar cu cel al selectatorilor de date.
În acest tutorial, veți vedea cum să adăugați un simplu selector de număr de telefon într-un câmp de introducere. Vom folosi HTML5, CSS3 și JavaScript pentru a ajunge la GUI pe care îl puteți vedea și testa în demo-ul de mai jos. De asemenea, vom folosi expresii regulate pentru a vă asigura că utilizatorii introduc cu adevărat un număr de telefon valid.
1. Creați câmpul Număr de telefon
Primul, creați un câmp de introducere cu o pictogramă de pe dreapta, care va deschide ecranul de apelare la clic. Pictograma de formare arată doar ca 9 cutii neagră, aranjate 3 la 3, trebuie să vă placă ceea ce vedeți pe un telefon obișnuit.
Eu folosesc tel tipul de intrare pentru semantica HTML5 corectă, dar puteți utiliza și text tipul de intrare, dacă doriți.
2. Creați ecranul de apelare
apelați ecranul este o grilă de numere de la 0 la 9 plus câteva caractere speciale. Se poate face cu fie un HTML Aici, vă vom arăta cum să creați tabelul cu ecranul de apelare în JavaScript. Puteți, bineînțeles, să adăugați tabelul direct în codul sursă HTML dacă îl preferați în acest fel. Mai întâi, creați un nou Adauga o Cei doi Ultimul rând este diferit, deoarece constă din două caractere speciale, Pentru a crea ultimul rând pe ecranul de apelare, adăugați următoarele ecranul de selecție este acum complet, adăugați-l la Pentru ao face mai atractivă, stilul ecranului de apelare cu CSS. Nu trebuie neapărat să rămâi cu stilul meu, dar nu uita să adăuga Mai întâi, adăugați Apoi, adăugați un handler de evenimente pentru clicuri pe pictograma de apelare cu JavaScript la comutați vizibilitatea a ecranului de formare. Pentru a face acest lucru, trebuie să utilizați cele menționate mai sus Adăugați o funcție personalizată introduce cifre în câmpul numărului de telefon pe clicul celulelor ecranului de formare. Acum, aveți un a ecran de lucru pentru a introduce câmpul numărului de telefon. Pentru a ține pasul cu CSS, schimbați culoarea de fundal a cifrelor Adauga o simpla validare a registrului pentru a valida numărul de telefon în timp ce utilizatorul introduce cifrele în câmpul de introducere. În conformitate cu regulile de validare pe care le folosesc, numărul de telefon poate începe numai cu o cifră sau cu Puteți vedea vizualizarea expresiei mele regulate pe ecranul de mai jos creat cu aplicația Debuggex. De asemenea, puteți valida numărul de telefon conform formatului de număr de telefon al țării sau regiunii dvs.. Creați un nou obiect Expresie regulată și păstrați-l în Când intrarea nu este validată, Sunt adăugând o margine roșie la câmpul de intrare atunci când intrarea este nevalidă, dar puteți informa utilizatorul în alte moduri, de exemplu, cu mesaje de eroare. Rețineți că am adăugat, de asemenea validare suplimentară pentru caracterele maxime (nu poate fi mai mare de 15) prin utilizarea unui Ta selector de numere de telefon este acum gata, verificați demo-ul final de mai jos. sau JavaScript.
'masa' element în DOM folosind createElement () metodă. De asemenea, da-i 'Dial' identificator. / * Crearea ecranului dial * / var dial = document.createElement ('table'); dial.id = 'dial'; pentru buclă pentru a introduce cele patru rânduri ale mesei cu ea. Apoi, pentru fiecare rând, alerga alta pentru buclă pentru a adăuga trei celule pe rând. Marchează fiecare celulă cu 'DialDigit' clasă. pentru (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();
pentru buclele de mai sus calculează cifrele care intră în celulele tabelului cu cifre - valorile valorilor cell.textContent proprietate - în modul următor: (0 + 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) 0 * 3) = 3 / * al doilea rând * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) 6 / * etc. * /
- și + care sunt utilizate în formatele numărului de telefon pentru a identifica codurile regionale și cifra 0.dacă declarație spre interior pentru buclă. pentru (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 Contul HTML pe care l-ați creat în Pasul 1 utilizând două metode DOM:querySelector () metoda de a selectați recipientulappendChild () metoda de a adăugați ecranul de apelare - ținută în cadran variabilă - la recipient document.querySelector ( '# dialWrapper') appendChild (dial).;
3. Stilul ecranului de apelare
utilizator-selectați: none; proprietate la #dial recipient astfel încât în timp ce utilizatorul face clic pe cifre, textul nu vor fi selectate de cursor. #dial width: 200px; înălțime: 200px; colaps de frontieră: colaps; text-align: centru; poziția: relativă; -ms-user-select: nici unul; -webkit-user-select: niciunul; -moz-user-select: nici unul; user-select: none; culoare: # 000; box-shadow: 0 0 6px # 999; . dialDigit border: 1px solid #fff; cursor: pointer; fundal-culoare: rgba (255,228,142, .7);
4. Afișați Ecranul Dial pe Clic
vizibilitate: ascunse; stil pentru a #dial în CSS de mai sus la ascundeți ecranul de apelare în mod implicit. acesta va fi afișat numai când utilizatorul face clic pe pictograma de apelare.querySelector () si addEventListener () metode. Acesta din urmă atașează un eveniment clic la pictograma de apelare și apelurile personalizate toggleDial () funcţie.toggleDial () funcţie schimbă vizibilitatea din ecranul de formare de la ascuns la vizibil și înapoi. document.querySelector ('# dialIcon') addEventListener ("clic", comutareDesculare); funcția toggleDial () dial.style.visibility = dial.style.visibility === 'ascuns' || dial.style.visibility === "? 'vizibil': 'ascuns'; 5. Adăugați funcționalitatea
formeaza numarul() funcţie adaugă cifrele unul câte unul la textContent proprietatea câmpului de introducere marcat cu #phoneNo identificator. phoneNo = document.querySelector ('# phoneNo'); funcția dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ('. dialDigit'); pentru (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); :planare și :activ (când utilizatorul face clic pe el). .dialDigit: mutați background-color: rgb (255,228,142); .dialDigit: activ background-color: # FF6478;
6. Adăugați Validarea expresiilor regulate
+ caracter, și să accepte - caracter după aceea.
model variabil. Creați, de asemenea, un personalizat valida() care verifică dacă numărul de telefon introdus respectă expresia regulată, și dacă este cel puțin 8 caractere lungime.valida() funcția trebuie să da feedback către utilizator. model = nou RegExp ("^ (\\ + \\ d 1,2)? (\\ d + \\ - * \\ d +) * $"); funcția validează (txt) // cel puțin 8 caractere pentru un număr de telefon valabil nr. dacă (! pattern.test (txt) || txt.length < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Efectuați Validarea
valida() funcții trebuie să fie numit pentru a efectua validarea. Sunați-l din formeaza numarul() funcția pe care ați creat-o la pasul 5 pentru a valida valoarea phoneNo variabil.dacă afirmație. funcția dialNumber () var val = phoneNo.value + this.textContent; // caractere maxime permise, 15 dacă (val.length> 15) return false; validarea (val); phoneNo.value = val;
