Kako ustvariti preprosto telefonsko številko Picker
Telefonske številke, Poleg imen in e-poštnih sporočil so najpogosteje uporabljene kontaktne informacije v spletnih obrazcih. Polja telefonskih številk so običajno zasnovana tako, da morajo uporabniki vtipkati številke pri uporabi tipkovnic. Ta metoda pogosto povzroči netočne vnose podatkov.
Za zmanjšanje napak pri vnosu uporabnika in izboljšate uporabniško izkušnjo vašega spletnega mesta, lahko ustvarite GUI ki omogoča uporabnikom, da hitro vnesejo svojo telefonsko številko, na način, ki je podoben datumu nabave.
V tej vadnici boste videli, kako V polje za vnos dodajte preprost izbiralnik telefonskih številk. Za dostop do grafičnega uporabniškega vmesnika, ki ga lahko vidite in preizkusite v spodnji predstavitvi, bomo uporabili HTML5, CSS3 in JavaScript. Prav tako bomo uporabili regularne izraze, da bodo uporabniki resnično vnesli veljavno telefonsko številko.
1. Ustvarite polje za telefonsko številko
Prvič, ustvarite vnosno polje z ikono za klicanje na desni strani, ki bo ob kliku odprla zaslon za klicanje. Ikona za klicanje je videti kot 9 črnih skrinjic, ki so razporejene po 3, in mora imeti radi tisto, kar vidite na običajnem telefonu.
Uporabljam tel vrsto vnosa za pravilno semantiko HTML5, lahko pa uporabite tudi besedilo vnesite vrsto vnosa, če želite.
2. Ustvarite zaslon za klicanje
The izbirnega zaslona je mrežo številk od 0 do 9 in nekaj posebnih znakov. Lahko ga naredimo bodisi HTML Tukaj vam bom pokazal, kako ustvarite zaslonsko tabelo za klicanje v JavaScriptu. Lahko seveda dodate tabelo neposredno v izvorno kodo HTML, če vam je tako všeč. Najprej ustvarite novo Dodajte a Dva Zadnja vrstica je drugačna, kot je sestavljena dva posebna znaka, Če želite ustvariti zadnjo vrstico na zaslonu za klicanje, dodajte naslednje The Zaslon za klicanje je zdaj končan, dodajte v Da bi bila bolj privlačna, slog izbirnega zaslona s CSS. Ni nujno, da se držite mojega stila, vendar ne pozabite add Najprej dodajte Nato ikoni za klicanje dodajte upravljalnik dogodka klikanja s JavaScriptom do preklopite vidnost izbirnega zaslona. Za to morate uporabiti prej omenjeno The Dodajte funkcijo po meri, ki vnese številke v polje telefonske številke s klikom celic na zaslonu za klicanje. The Zdaj imate delujoč zaslon za klicanje za vnos polja telefonske številke. Če želite slediti CSS, spremenite barvo ozadja števk v njihovih Dodajte a preprosto preverjanje regexa za preverjanje telefonske številke med uporabnikom vnese številke v vnosno polje. V skladu s pravili za preverjanje veljavnosti, ki jih uporabljam, lahko telefonsko številko začnete le z eno ali več mesti Vidite lahko svoj vizualizacijo mojega regularnega izraza na spodnji zaslonski sliki, ustvarjeni s programom Debuggex. Telefonsko številko lahko preverite tudi v formatu telefonske številke vaše države ali regije. Ustvarite nov objekt regularnega izraza in ga shranite v Ko vhod ne potrdi, Sem dodajanje rdeče obrobe v vnosno polje, ko je vnos neveljaven, vendar lahko uporabnika obvestite na druge načine, na primer, s sporočili o napakah. The Upoštevajte, da sem dodal tudi dodatno potrditev za največje število znakov (ne sme biti več kot 15) z uporabo Vaš Izbira telefonske številke je zdaj pripravljen, si oglejte končni demo spodaj. ali JavaScript.
"tabela" element DOM z uporabo createElement () metodo. Daj mu tudi "izbiranje" identifikator. / * Ustvari zaslon za klicanje * / var dial = document.createElement ('tabela'); dial.id = 'klicanje'; za zanke Če želite z njo vstaviti štiri vrstice preglednice. Nato za vsako vrstico, zaženite drugo za zanke za dodajanje treh celic v vrstico. Označite vsako celico z "dialDigit" razred. za (var rowNum = 0; vrsticaNum < 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();
za zanke zgoraj izračunajo števke, ki gredo v celice mize za izbiranje - vrednosti cell.textContent nepremičnine - na naslednji način: (stolpec + 1) + (vrstaNum * 3) / * prva vrstica * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + ( 0 * 3) = 3 / * druga vrsta * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * itd. * /
- in + ki se uporabljajo v oblikah telefonskih številk za identifikacijo regionalnih kod in števk 0.če izjavo za notranje za zanke. za (var rowNum = 0; vrsticaNum < 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 vsebnik, ki ste ga ustvarili v 1. koraku z uporabo dve metodi DOM:querySelector () metodo izberite posodoappendChild () metodo dodajte zaslon za klicanje - potekajo v. \ t pokličite spremenljivka - do vsebnika document.querySelector ('# dialWrapper'). appendChild (izbiranje); 
3. Nastavi zaslon za klicanje
user-select: noben; premoženja #dial posodo tako, da medtem ko uporabnik klikne na številke, besedilo kazalec ne bo izbran. #dial width: 200px; višina: 200px; meja-kolaps: kolaps; text-align: center; položaj: relativna; -ms-user-select: nič; -webkit-user-select: noben; -moz-user-select: nič; user-select: noben; barva: # 000; box-shadow: 0 0 6px # 999; .dialDigit border: 1px solid #fff; kazalec: kazalec; barva ozadja: rgba (255,228,142, .7);
4. Prikažite zaslon za klicanje ob kliku
vidljivost: skrita; pravilo slog #dial v zgornjem CSS do skriti zaslon za klicanje privzeto. prikazal se bo samo, ko uporabnik klikne ikono za klicanje.querySelector () in addEventListener () metod. Slednje pripisuje dogodek klika na ikono za klicanje in kliče po meri toggleDial () funkcijo.toggleDial () funkcijo spremeni vidnost izbirnega zaslona od skritega do vidnega in nazaj. document.querySelector ('# dialIcon'). addEventListener ('klik', preklopi na dlan); funkcija toggleDial () dial.style.visibility = dial.style.visibility === 'hidden' || dial.style.visibility === "? 'visible': 'hidden'; 5. Dodajte funkcijo
klicna številka () funkcijo številke doda eno za drugo do textContent lastnosti vnosnega polja, označenega z #phoneNo identifikator. phoneNo = document.querySelector ('# phoneNo'); funkcija dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ('. dialDigit'); za (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); : hover in : aktivno (ko uporabnik klikne nanj). .dialDigit: hover barva ozadja: rgb (255,228,142); .dialDigit: aktivno ozadje-barva: # FF6478;
6. Dodajte preverjanje pravilnega izraza
+ in sprejmite znak - znak.
vzorec spremenljivko. Ustvarite tudi po meri validate () , ki preveri, ali je vnesena telefonska številka ustreza regularnemu izrazu, in če je vsaj 8 znakov.validate () funkcijo dajte povratne informacije uporabniku. pattern = new RegExp ("^ (+/-) d 1,2)? (d + + - * \ t function validate (txt) // vsaj 8 znakov za veljavni telefonski št. if (! pattern.test (txt) || txt.length < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Izvedite preverjanje veljavnosti
validate () funkcije treba poklicati za izvedbo validacije. Pokličite ga iz klicna številka () funkcijo, ki ste jo ustvarili v 5. koraku, da potrdite vrednost Ne spremenljivko.če izjavo. funkcija dialNumber () var val = phoneNo.value + this.textContent; // največje dovoljeno število znakov, 15 če (val.length> 15) vrne false; validirati (val); phoneNo.value = val;
