Kako stvoriti jednostavan telefonski broj Picker
Brojevi telefona, osim imena i e-pošte, najčešće se koriste kontaktne informacije u online obrascima. Polja telefonskog broja obično su dizajnirana tako da korisnici moraju unijeti brojeve u tipkovnicu. Ova metoda često rezultira netočnim unosom podataka.
Do smanjite pogreške pri unosu korisnika i poboljšati korisničko iskustvo vaše web-lokacije, možete stvoriti GUI koji korisnicima omogućuju da brzo unesu svoj telefonski broj, na način koji je sličan onima za skupljanje datuma.
U ovom vodiču vidjet ćete kako u polje za unos unesite jednostavan odabir broja telefona. Koristit ćemo HTML5, CSS3 i JavaScript kako bismo došli do GUI-a koji možete vidjeti i testirati u demo-verziji u nastavku. Koristit ćemo i uobičajene izraze kako bismo bili sigurni da korisnici stvarno unesu važeći telefonski broj.
1. Stvorite polje Broj telefona
Prvi, stvorite polje za unos s ikonom za biranje na desnoj strani koja će otvoriti zaslon za biranje na klik. Ikona za biranje izgleda samo kao 9 crnih kutija, raspoređenih po 3, što se mora svidjeti onome što vidite na običnom telefonu.
Koristim tel tip unosa za pravilnu HTML5 semantiku, ali možete koristiti i tekst ako želite.
2. Stvorite zaslon za biranje
zaslon za biranje je mreža brojeva od 0 do 9 plus neki posebni znakovi. Može se napraviti s ili HTML Ovdje ću vam pokazati kako stvoriti zaslonsku tablicu za biranje u JavaScriptu. Možete, naravno, dodati tablicu izravno u HTML izvorni kôd ako vam se tako sviđa. Prvo stvorite novo Dodati Dva Posljednji redak je drukčiji, kako se sastoji dva posebna znaka, Da biste kreirali posljednji red na zaslonu za biranje, dodajte sljedeće zaslon za biranje je sada dovršen, dodajte ga u Da bi bio privlačniji, namjestite zaslon za biranje s CSS-om. Ne morate nužno držati se mog stila, ali ne zaboravite dodati Prvo dodajte Zatim dodajte rukovatelj događajima klik ikoni za biranje s JavaScriptom do prebacivanje vidljivosti zaslona za biranje. Da biste to učinili, morate koristiti gore spomenuto Dodajte prilagođenu funkciju unosi znamenke u polje telefonskog broja klikom na ćelije zaslona za biranje. Sada, vi imate radni zaslon za biranje za unos broja telefonskog broja. Da biste pratili CSS, promijenite boju pozadine znamenki u njihovoj Dodati jednostavna regex validacija za provjeru valjanosti telefonskog broja dok je korisnik unosi znamenke u polje za unos. Prema pravilima za provjeru valjanosti koje koristim, telefonski broj može započeti samo s znamenkom ili s brojem Možete vidjeti vizualizaciju mog uobičajenog izraza na donjoj slici koja je napravljena pomoću aplikacije Debuggex. Telefonski broj možete provjeriti i prema formatu telefonskog broja vaše zemlje ili regije. Stvorite novi objekt regularnog izraza i pohranite ga u Kada unos ne potvrdi, Ja sam dodavanjem crvene granice u polje za unos kada je unos nevažeći, ali možete obavijestiti korisnika na druge načine, na primjer, s porukama o pogreškama. Napominjem da sam dodao i dodatna provjera valjanosti za maksimalni broj znakova (ne može biti više od 15) pomoću znaka vaš odabir broja telefona je sada spreman, pogledajte konačni demo u nastavku. ili JavaScript.
'stol' element u DOM pomoću createElement () metoda. Također mu dajte „Biranje” identifikator. / * Kreirajte zaslon za biranje * / var dial = document.createElement ('table'); dial.id = 'biraj'; za petlja da biste s njim umetnuli četiri retka tablice za biranje. Zatim, za svaki redak, pokrenuti drugu za petlja kako bi dodali tri stanice po redu. Označite svaku ćeliju s 'DialDigit' klasa. za (var rowNum = 0; redNum < 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 petlje iznad izračunati znamenke koje idu u ćelije bira tablice - vrijednosti cell.textContent vlasništvo - na sljedeći način: (colNum + 1) + (redNum * 3) / * prvi red * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + ( 0 * 3) = 3 / * drugi red * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * itd. * /
- i + koji se koriste u formatima telefonskih brojeva za identifikaciju regionalnih kodova i znamenki 0.ako izjavu unutarnjem za petlja. za (var rowNum = 0; redNum < 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 spremnik koji ste izradili u koraku 1 pomoću dvije DOM metode:querySelector () metoda odaberite spremnikappendChild () metoda dodajte zaslon za biranje - održava u nazvati varijabla - u spremnik document.querySelector ( '# dialWrapper') appendChild (biranje).
3. Podesite zaslon za biranje
korisnički odaberite: none; imovine #dial kontejner tako da dok korisnik klikne na znamenke, tekst neće biti odabran pomoću pokazivača. #dial width: 200px; visina: 200px; border-collapse: kolaps; poravnavanje teksta: centar; pozicija: relativna; -ms-user-select: none; -webkit-user-select: nema; -moz-user-select: nema; user-select: nema; boja: # 000; kutija-sjena: 0 0 6px # 999; .dialDigit border: 1px solid #fff; pokazivač: pokazivač; pozadinska boja: rgba (255,228,142, .7);
4. Prikažite zaslon za biranje na klik
visibility: hidden; pravilo stila #dial u gornjem CSS-u do sakriti zaslon za biranje prema zadanim postavkama. prikazivat će se samo kada korisnik klikne na ikonu za biranje.querySelector () i addEventListener () metode. Potonji dodaje događaj klikom na ikonu za biranje i poziva običaj toggleDial () funkcija.toggleDial () funkcija mijenja vidljivost zaslona za biranje od skrivenog do vidljivog i natrag. document.querySelector ('# dialIcon') addEventListener ('klik', toggleDial); funkcija toggleDial () dial.style.visibility = dial.style.visibility === 'hidden' || dial.style.visibility === "?" vidljivo ":" skriveno "; 5. Dodajte funkcionalnost
pozivni broj() funkcija dodaje znamenke jednu po jednu prema textContent svojstvo polja za unos označeno s #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 i :aktivan (kada korisnik klikne na njega) navodi. .dialDigit: hover boja pozadine: rgb (255,228,142); .dialDigit: aktivno pozadinska boja: # FF6478;
6. Dodajte validaciju regularnog izraza
+ i prihvatite znak - nakon toga.
uzorak promjenjiva. Također izradite običaj potvrditi () koja provjerava je li unesen telefonski broj odgovara regularnom izrazu, i ako je najmanje 8 znakova.potvrditi () funkcija treba dati povratnu informaciju korisniku. pattern = new RegExp ("^ (d) 1,2)?" (+) \ t funkcija validate (txt) // najmanje 8 znakova za važeći broj telefona if (! pattern.test (txt) || txt.length < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Izvršite provjeru valjanosti
potvrditi () funkcije treba pozvati radi provjere valjanosti. Nazovite je iz pozivni broj() koju ste stvorili u koraku 5 kako biste potvrdili vrijednost phoneNo varijabla.ako izjava. funkcija dialNumber () var val = phoneNo.value + this.textContent; // maksimalno dopuštenih znakova, 15 ako (val.length> 15) vraća false; potvrditi (Val); phoneNo.value = val;
