Ako vytvoriť jednoduché telefónne číslo Picker

Telefónne čísla, okrem mien a e-mailov sú najčastejšie používané kontaktné informácie v online formulároch. Polia telefónneho čísla sú zvyčajne navrhnuté tak, aby používatelia mohli zadávať čísla pomocou klávesnice. Táto metóda často vedie k nesprávnemu zadaniu údajov.

na znížiť chyby vstupu používateľa a zlepšiť užívateľskú skúsenosť s vašimi stránkami, môžete vytvoriť GUI , ktorý používateľom umožňuje rýchlo zadať svoje telefónne číslo spôsobom, ktorý je podobný výberu dátumov.

V tejto príručke uvidíte, ako môžete do vstupného poľa pridajte jednoduchý výber telefónneho čísla. Použijeme HTML5, CSS3 a JavaScript, aby sme sa dostali do grafického rozhrania, ktoré môžete vidieť a otestovať v demo nižšie. Používame tiež regulárne výrazy, aby sme sa uistili, že používatelia skutočne zadali platné telefónne číslo.

1. Vytvorte pole Telefónne číslo

najprv, vytvorte vstupné pole s ikonou vytáčania vpravo, ktorá po kliknutí otvorí obrazovku vytáčania. Ikona číselníka vyzerá len ako 9 čiernych políčok, usporiadaných 3 až 3, ktoré sa vám páčia to, čo vidíte na bežnom telefóne.

Používam to tel typ vstupu pre správnu sémantiku HTML5, ale môžete tiež použiť text typ vstupu, ak chcete.

2. Vytvorte obrazovku vytáčania

dial dial je mriežka čísel od 0 do 9 plus niektoré špeciálne znaky. Môže sa to robiť buď HTML

Tu vám ukážem, ako vytvoriť tabuľku obrazovky dialógu v jazyku JavaScript. Samozrejme, môžete pridať tabuľku priamo do zdrojového kódu HTML, ak to uprednostňujete.

Najprv vytvorte nový , Stôl ' prvok v DOM pomocou createElement () metóda. Dajte mu tiež 'vytočiť' identifikátor.

 / * Vytvoriť dial obrazovku * / var dial = document.createElement ('tabuľka'); dial.id = 'dial'; 

Pridaj pre slučka vložte do nej štyri riadky číselnej tabuľky. Potom pre každý riadok, spustiť iný pre slučka aby sa pridali tri bunky na riadok. Označte každú bunku s 'DialDigit' trieda.

 pre (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();   

Dva pre slučky vyššie počítajú číslice, ktoré idú do buniek tabuľky čísel - hodnoty cell.textContent nehnuteľnosť - nasledujúcim spôsobom:

 (0 + 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) 0 * 3) = 3 / * druhý rad * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) 6 / * atď. * / 

Posledný riadok je iný, pretože pozostáva z dva špeciálne znaky, - a + ktoré sa používajú vo formátoch telefónnych čísel na identifikáciu regionálnych kódov a číslice 0.

Ak chcete vytvoriť posledný riadok na obrazovke vytáčania, pridajte nasledujúce ak vyhlásenie k vnútornej pre slučka.

 pre (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();   

vytáčanie je teraz dokončené, pridajte ho do #dialWrapper Ktorý ste vytvorili v kroku 1 pomocou dve metódy DOM:

1. querySelector () metóda na vyberte kontajner
2. appendChild () metóda na pripojte obrazovku vytáčania - ktoré sa konajú v vytočiť premenná - na kontajner

 document.querySelector ( '# dialWrapper') appendChild (dial). 

3. Stlačte obrazovku vytáčania

Ak chcete, aby bol atraktívnejší, štýl dial obrazovky s CSS.

Nemusíte sa nevyhnutne držať svojho štýlu, ale nezabudnite pridať užívateľsky zvoliť: none; majetok do #vytočiť kontajner takže kým používateľ klikne na číslice, text kurzor sa nezvolí.

 #dial width: 200px; výška: 200px; hraničný kolaps: zrútenie; text-align: center; pozícia: relatívna; -ms-user-select: žiadny; -webkit-user-select: žiadne; -moz-user-select: žiadny; user-select: žiadne; farba: # 000; box-tieň: 0 0 6px # 999; . dialDigit border: 1px solid #fff; kurzor: ukazovateľ; farba pozadia: rgba (255,228,142, .7);  

4. Zobrazte obrazovku vytáčania po kliknutí

Najprv pridajte visibility: hidden; pravidlo štýlu #vytočiť vo vyššie uvedenom CSS na skryť obrazovku vytáčania predvolene. zobrazí sa iba vtedy, keď používateľ klikne na ikonu vytáčania.

Potom pridajte handler udalosti kliknutí na ikonu vytáčania pomocou jazyka JavaScript na prepínať viditeľnosť obrazovky vytáčania.

Ak to chcete urobiť, musíte použiť vyššie uvedené querySelector () a addEventListener () metódy. Druhý pripojí udalosť kliknutia na ikonu vytáčania a zavolá na vlastné toggleDial () funkcie.

toggleDial () funkcie mení viditeľnosť obrazovky vytáčania zo skrytých na viditeľné a späť.

 dokument.querySelector ('# dialIcon') addEventListener ('kliknite', prepnúťDial); funkcia toggleDial () dial.style.visibility = dial.style.visibility === 'hidden' || dial.style.visibility === "? 'viditeľný': 'skrytý'; 

5. Pridajte funkčnosť

Pridajte vlastnú funkciu zadáva číslice do poľa telefónneho čísla po kliknutí na bunky obrazovky vytáčania.

vytočiť číslo() funkcie pripojí číslice jeden po druhom na textContent vlastnosť vstupného poľa označeného znakom #telefonne cislo identifikátor.

 phoneNo = document.querySelector ('# phoneNo'); funkcia dialNumber () phoneNo.value + = this.textContent;  dialDigits = document.querySelectorAll ("dialDigit"); pre (var i = 0; i < dialDigits.length; i++)  dialDigits[i].addEventListener('click', dialNumber);  

Teraz máte pracovná obrazovka zadajte pole telefónneho čísla.

Ak chcete držať krok s CSS, zmeniť farbu pozadia číslic v ich :vznášať sa a : aktívny (keď používateľ klikne na ne) uvádza.

 .dialDigit: vznášať background-color: rgb (255,228,142);  .dialDigit: aktívna farba pozadia: # FF6478;  

6. Pridajte validáciu regulárnych výrazov

Pridaj jednoduché overovanie regexu na potvrdenie telefónneho čísla počas používania zadá číslice do vstupného poľa. Podľa pravidiel overenia, ktoré používam, telefónne číslo môže začať iba s číslicou alebo s číslom + znak, a prijať - znak potom.

Môžete vidieť vizualizáciu môjho regulárneho výrazu na obrazovke nižšie vytvorenej pomocou aplikácie Debuggex.

Môžete tiež overiť telefónne číslo podľa formátu telefónneho čísla vašej krajiny alebo regiónu.

Vytvorte nový objekt Regular Expression a uložte ho do priečinka vzor variabilné. Vytvorte tiež vlastné potvrdiť() funkcia, ktorá kontroluje, či je zadané telefónne číslo je v súlade s regulárnym výrazom, a ak je to minimálne 8 znakov.

Keď vstup neaktivuje, potvrdiť() funkcia potrebuje dať spätnú väzbu používateľovi.

som pridaním červenej hranice do vstupného poľa, keď je vstup neplatný, ale môžete informovať používateľa inými spôsobmi, napríklad chybovými hláseniami.

 vzor = nový RegExp ("^ (\\ + \\ d 1,2)? (\\ d + \\ - * \\ d +) * $"); funkcia validovať (txt) // najmenej 8 znakov pre platný telefón č. ak (! pattern.test (txt) || txt.length < 8)  phoneNo.style.border = '2px solid red'; return false;  else phoneNo.style.border = 'initial'; return true;  

7. Vykonajte validáciu

potvrdiť() funkcie je potrebné zavolať s cieľom vykonať validáciu. Zavolajte na adresu vytočiť číslo() ktorú ste vytvorili v kroku 5, aby ste potvrdili hodnotu telefonne cislo premenlivý.

Upozorňujeme, že som tiež pridal dodatočné overenie pre maximálne znaky (nemôže byť viac ako 15) pomocou ak výkaz.

 funkcia dialNumber () var val = phoneNo.value + this.textContent; // maximálne povolené znaky, 15 ak (val.length> 15) vráti nesprávne; overenie (val); phoneNo.value = val;  

tvoj výber telefónneho čísla je teraz pripravený, pozrite si posledné demo nižšie.

Ako vytvoriť statický blog pomocou kaktusu [OS X]

Ako vytvoriť silné heslo (a pamätať si to)

Ako vytvoriť odkaz na zmenu servera DNS v systéme Windows

Ďalší článok

Ako vytvoriť pole RAID softvéru v systéme Windows 7

Predchádzajúci článok

Ako vytvoriť odkaz na Windows Update v systéme Windows 10