Kaip sukurti paprastą telefono numerį
Telefono numeriai, be vardų ir el. laiškų, yra dažniausiai naudojama internetinės formos kontaktinė informacija. Telefono numerių laukai paprastai yra suprojektuoti taip, kad naudotojai turėtų įvesti numerius naudodami jų klaviatūras. Šis metodas dažnai sukelia netikslų duomenų įvedimą.
Į sumažinti naudotojo įvesties klaidas ir pagerinti savo svetainės naudotojų patirtį, galite sukurti a GUI tai leidžia vartotojams greitai įvesti savo telefono numerį tokiu būdu, kuris panašus į datų rinkėjus.
Šioje instrukcijoje pamatysite, kaip pridėkite paprastą telefono numerio rinkiklį į įvesties lauką. Mes naudosime HTML5, CSS3 ir „JavaScript“, kad patektume į GUI, kurią matote ir išbandysite žemiau esančioje demonstracijoje. Mes taip pat naudosime reguliarias išraiškas, kad įsitikintume, jog vartotojai tikrai įveda galiojantį telefono numerį.
1. Sukurkite telefono numerio lauką
Pirmas, sukurti įvesties lauką su dešiniuoju dial piktograma, kuri atidarys paspaudimo ekraną. Rinkimo piktograma tiesiog atrodo kaip 9 juodos dėžės, išdėstytos 3, 3, turi būti panašios į tai, ką matote įprastame telefone.
Aš naudoju tel tinkamo HTML5 semantikos įvesties tipas, bet taip pat galite naudoti tekstą įvesties tipas, jei norite.
2. Sukurkite Dial Screen
The rinkimo ekranas yra numerių tinklelį nuo 0 iki 9 ir kai kurių specialių simbolių. Tai galima padaryti su arba HTML Čia jums parodysiu, kaip sukurti „JavaScript“ skilties ekrano lentelę. Žinoma, galite pridėti lentelę tiesiai į HTML šaltinio kodą, jei norite, kad taip būtų. Pirma, sukurkite naują Pridėti Du Paskutinė eilutė skiriasi, nes ji susideda iš du specialieji simboliai, Jei norite sukurti paskutinę eilutę į skambinimo ekraną, pridėkite šiuos veiksmus The dabar yra baigtas rinkimo ekranas, pridėti jį prie Kad jis taptų patrauklesnis, stiliaus rinkimo ekraną su CSS. Jūs nebūtinai turite laikytis savo stiliaus, bet nepamirškite papildyti Pirmiausia pridėkite Tada pridėkite paspaudimo įvykio tvarkyklę į rinkimo piktogramą su „JavaScript“ į perjungti matomumą ekrane. Norėdami tai padaryti, turite naudoti pirmiau minėtą The Pridėti priskirtą funkciją įveda skaitmenis į telefono numerio lauką spustelėję skambinimo ekrano langelius. The Dabar jūs turite darbo rinkimo ekranas įvesti telefono numerio lauką. Jei norite neatsilikti nuo CSS, pakeiskite jų skaitmenų fono spalvą Pridėti paprastas regex patvirtinimas patvirtinti telefono numerį vartotojui įveda skaitmenis į įvesties lauką. Pagal patvirtinimo taisykles, kurias naudoju, telefono numeris gali būti pradėtas tik su skaitmeniu arba Mano reguliarios išraiškos vizualizaciją galite pamatyti žemiau pateiktame ekrano vaizde, kuris buvo sukurtas naudojant „Debuggex“ programą. Taip pat galite patvirtinti telefono numerį pagal savo šalies ar regiono telefono numerio formatą. Sukurkite naują reguliaraus išraiškos objektą ir išsaugokite jį Kai įvestis nepatvirtinama, aš pridedant raudoną sieną į įvesties lauką, kai įvestis yra neteisinga, tačiau galite pranešti naudotojui kitais būdais, pavyzdžiui, su klaidų pranešimais. The Atkreipkite dėmesį, kad pridėjau ir papildomas patvirtinimas maksimaliems simboliams (negali būti daugiau kaip 15) naudojant Tavo telefono numerio rinkiklis dabar pasiruošęs, patikrinkite žemiau pateiktą galutinį demonstraciją. arba „JavaScript“.
„lentelė“ elementas DOM naudojant createElement () metodas. Taip pat suteikite jai „rinkimas“ identifikatorius. / * Sukurti rinkimo ekraną * / var dial = document.createElement ('lentelė'); dial.id = 'surinkti'; dėl kilpa įterpti keturias rinkimo stalo eilutes. Tada kiekvienai eilutei, paleisti kitą dėl kilpa norint pridėti tris ląsteles vienoje eilutėje. Pažymėkite kiekvieną langelį su „dialDigit“ klasė. už (var rowNum = 0; eilutėNum < 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();
dėl aukščiau pateiktos kilpos apskaičiuoja skaitmenis, kurie eina į skambučių lentelės langelius - cell.textContent nuosavybė - taip: (colNum + 1) + (rowNum * 3) / * pirmoji eilutė * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + ( 0 * 3) = 3 / * antra eilutė * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * ir tt * /
- ir + kurie naudojami telefono numerių formatuose, kad būtų galima nustatyti regioninius kodus ir skaitmenį 0.jei pareiškimas vidiniam dėl kilpa. už (var rowNum = 0; eilutėNum < 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 HTML paketas, kurį sukūrėte 1 veiksme, naudodami du DOM metodai:querySelector () metodas pasirinkite konteinerįpridėtiChild () metodas pridėti skambinimo ekraną - vyks surinkti kintamasis - į konteinerį document.querySelector ('# dialWrapper'). appendChild (surinkti); 
3. Stiliuokite ekraną Dial
vartotojo pasirinkimas: nėra; nuosavybė #dial konteinerį kad vartotojas spustelėtų skaitmenis, tekstą žymeklis nepasirinks. #dial plotis: 200px; aukštis: 200px; sienos žlugimas: žlugimas; teksto derinimas: centras; pozicija: santykinis; -ms-user-select: nėra; -webkit-user-select: nėra; -moz-user-select: nėra; vartotojo pasirinkimas: nėra; spalva: # 000; dėžutės šešėlis: 0 0 6px # 999; .dialDigit border: 1px solid #fff; žymeklis: žymeklis; fono spalva: rgba (255,228,142, .7);
4. Rodyti „Dial“ ekraną „Click“
matomumas: paslėptas; stiliaus taisyklė #dial aukščiau pateiktame CSS į paslėpti rinkimo ekraną pagal nutylėjimą. jis bus rodomas tik tada, kai naudotojas spustelės skambinimo piktogramą.querySelector () ir addEventListener () metodus. Pastarasis prideda paspaudimo įvykį į skambinimo piktogramą ir skambina įprasta toggleDial () funkcija.toggleDial () funkcija keičia matomumą ekrano iš paslėpto į matomą ir atgal. document.querySelector („# dialIcon“). addEventListener („spustelėkite“, „toggleDial“); funkcija toggleDial () dial.style.visibility = dial.style.visibility === „paslėpta“ || dial.style.visibility === "?" matomas ":" paslėptas ";
5. Pridėti funkcionalumą
dialNumber () funkcija prideda skaitmenis po vieną į textContent įvesties lauko, pažymėto „ #phoneNo identifikatorius. phoneNo = document.querySelector ('# phoneNo'); funkcija dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll („. dialDigit“); už (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); : Pakimba ir : aktyvus (kai vartotojas paspaudžia ant jo). .dialDigit: hover fono spalva: rgb (255,228,142); .dialDigit: active fono spalva: # FF6478;
6. Pridėti reguliarios išraiškos patvirtinimą
+ ir priimti - po to.
modelį kintamasis. Taip pat sukurkite pasirinkimą patvirtinti () funkcija, kuri tikrina, ar įvestas telefono numeris atitinka įprastą išraišką, ir jei tai yra ne mažiau kaip 8 simboliai.patvirtinti () funkcija turi palikti atsiliepimą vartotojui. modelis = naujas RegExp ("^ (d 1,2)? (d + * * + +) * $"); funkcija patvirtina (txt) // bent 8 simboliai galiojančiam telefonui Nr. jei (! pattern.test (txt) || txt.length) < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Atlikite patvirtinimą
patvirtinti () funkcijos reikia paskambinti siekiant atlikti patvirtinimą. Skambinkite iš dialNumber () funkcija, kurią sukūrėte 5 veiksme, kad patvirtintumėte phoneNo kintamasis.jei pareiškimas. funkcija dialNumber () var val = phoneNo.value + this.textContent; // leidžiami didžiausi simboliai, 15, jei (val.length> 15) grįžta į klaidingą; patvirtinti (val); phoneNo.value = val;
