Kuidas luua lihtsa telefoninumbri valija

Telefoninumbrid, lisaks nimedele ja e-kirjadele on ka kõige sagedamini kasutatav kontaktandmed võrgus. Telefoninumbrite väljad on tavaliselt kujundatud viisil, mis nõuab kasutajatelt numbrite sisestamist nende klaviatuuride abil. See meetod põhjustab sageli ebatäpseid andmeid.

Et vähendada kasutaja sisendvigu ja parandage saidi kasutajate kogemusi, saate luua a GUI mis võimaldab kasutajatel kiiresti sisestada oma telefoninumbri, mis on sarnane kuupäeva valijatele.

Selles juhendis näete, kuidas seda teha lisage sisestusväljale lihtne telefoninumbri valija. Me kasutame HTML5, CSS3 ja JavaScripti, et pääseda GUI-sse, mida näete ja testida allpool. Kasutame ka regulaaravaldisi, et veenduda, et kasutajad tõesti sisestavad kehtiva telefoninumbri.

1. Loo telefoninumber

Esiteks, luua sisendvälja parempoolsel valimise ikoonil, mis avab klõpsamise valikuekraani. Valikuklahv näeb välja nagu 9 musta kastiga, mis on paigutatud 3-ni 3-ni, peavad olema sarnased tavalise telefoniga.

Ma kasutan tel sisendi tüüp õige HTML5 semantika jaoks, kuid saate kasutada ka teksti sisendi tüüp, kui soovite.

2. Looge Dial Screen

The valimise ekraan on numbrite võrk 0 kuni 9 pluss mõned erimärgid. Seda saab teha koos kas HTML

Siin näitan teile, kuidas luua JavaScripti dial-ekraani tabel. Loomulikult saate tabeli otse HTML-lähtekoodi lisada, kui soovite seda nii.

Esiteks looge uus "laud" element DOM kasutades createElement () meetod. Samuti anna see „dial” identifikaator.

 / * Loo dial ekraan * / var dial = document.createElement ('tabel'); dial.id = 'dial'; 

Lisa jaoks silmus vali tabeli neli rida. Seejärel iga rea ​​kohta, käivitage teine jaoks silmus kolme rida lisamiseks. Märgistage kõik lahtrid koos 'dialDigit' klassi.

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

Kaks jaoks ülaltoodud silmused arvutavad numbreid, mis sisenevad valimistabeli lahtritesse cell.textContent vara - järgmiselt:

 (colNum + 1) + (ridaNum * 3) / * esimene rida * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + ( 0 * 3) = 3 / * teine ​​rida * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * jne * / 

Viimane rida on erinev, sest see koosneb kaks erimärki, - ja + mida kasutatakse telefoninumbri vormingus piirkondlike koodide tuvastamiseks ja numbrit 0.

Viimase rea loomiseks valikukuvale lisage järgmine kui avaldus sisemisele jaoks silmus.

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

The valimise ekraan on nüüd valmis, lisage see #dialWrapper HTML-konteiner, mille olete loonud 1. etapis, kasutades kaks DOM meetodit:

1. the querySelector () meetod valige konteiner
2. the lisageChild () meetod lisage valimisekraan - peetud valida muutuja - mahutisse

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

3. Treenige valikuklahvi

Et muuta see atraktiivsemaks, kujundage valimisekraan CSS-iga.

Sa ei pea tingimata oma stiiliga kinni jääma, kuid ärge unustage lisama kasutajavalik: pole; vara #dial konteiner nii, et kui kasutaja klõpsab numbritele, siis tekst kursor ei vali.

 #dial width: 200px; kõrgus: 200 px; piiri-kokkuvarisemine: kollaps; teksti joondamine: keskus; positsioon: suhteline; -ms-user-select: pole; -webkit-user-select: pole; -moz-user-select: pole; kasutajavalik: pole; värv: # 000; box-shadow: 0 0 6px # 999;  .dialDigit border: 1px solid #fff; kursor: pointer; taustavärv: rgba (255,228,142, .7);  

4. Näita nuppu Dial ekraanil

Esmalt lisage nähtavus: peidetud; stiili reegel #dial ülaltoodud CSS-is kuni peida valimisekraan vaikimisi. seda näidatakse ainult siis, kui kasutaja klõpsab valikuklahvile.

Seejärel lisage valikuikoonile klikkide sündmuste käitleja JavaScriptiga kuni nähtavuse muutmiseks ekraanil.

Selleks peate kasutama ülalnimetatud querySelector () ja addEventListener () meetodid. Viimane lisab klikkimise helistamiskuvale ja helistab tavalisele toggleDial () funktsiooni.

The toggleDial () funktsiooni muudab nähtavust ekraanil peidetud nähtavale ja tagasi.

 document.querySelector ('# dialIcon'). addEventListener ('kliki', toggleDial); funktsioon toggleDial () dial.style.visibility = dial.style.visibility === 'peidetud' || dial.style.visibility === "?" nähtav: "peidetud"; 

5. Lisage funktsioon

Lisage kohandatud funktsioon sisestab numbreid telefoninumbri väljale klaviatuuri ekraanil klõpsates.

The dialNumber () funktsiooni lisab numbrid ükshaaval Euroopa textContent sisendvälja omadus, mis on tähistatud tähega #phoneNo identifikaator.

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

Nüüd on teil a töövalimise ekraan telefoninumbri sisestamiseks.

CSS-iga sammu pidamiseks muutke nende numbrite taustavärvi :hõljuma ja : aktiivne (kui kasutaja sellele klõpsab).

 .dialDigit: hover taustavärv: rgb (255,228,142);  .dialDigit: aktiivne taustavärv: # FF6478;  

6. Lisage regulaaravaldise valideerimine

Lisa lihtne regexi valideerimine kasutaja numbri kinnitamiseks sisestab sisestusväljale numbrid. Vastavalt kasutatavatele valideerimisreeglitele võib telefoninumber alata ainult numbriga või + ja nõustuge - pärast seda.

Debuggexi rakendusega loodud ekraanil kuvatakse minu regulaaravaldise visualiseerimine.

Samuti saate kinnitada telefoninumbri vastavalt oma riigi või piirkonna telefoninumbrile.

Looge uus regulaaravaldise objekt ja salvestage see muster muutuja. Loo ka kohandatud valideeri () funktsioon, mis kontrollib sisestatud telefoninumbri olemasolu vastab regulaaravaldisele, ja kui see on vähemalt 8 tähemärki.

Kui sisend ei kinnita, siis valideeri () funktsioon peab olema anda tagasisidet kasutajale.

Ma olen punase piiri lisamine sisendväljale, kui sisend on vale, kuid te saate kasutajaid teavitada muul viisil, näiteks veateadetega.

 muster = uus RegExp ("^ (d 1,2) a (d + * * + +) * $"); funktsioon valideerida (txt) // vähemalt 8 tähemärki kehtiva telefoni nr. kui (! pattern.test (txt) || txt.length) < 8)  phoneNo.style.border = '2px solid red'; return false;  else phoneNo.style.border = 'initial'; return true;  

7. Tehke valideerimine

The valideeri () funktsioone tuleb nimetada valideerimiseks. Kutsuge seda dialNumber () funktsioon, mille olete loonud 5. etapis, et kinnitada väärtust phoneNo muutuja.

Pange tähele, et lisasin ka täiendav valideerimine maksimaalsete tähemärkide puhul (ei tohi olla rohkem kui 15) kui avaldus.

 funktsioon dialNumber () var val = phoneNo.value + this.textContent; // lubatud maksimaalsed märgid, 15 kui (val.length> 15) naaseb vale; valideerida (val); phoneNo.value = val;  

Teie telefoninumbri valija on nüüd valmis, vaadake allpool olevat lõplikku demot.

Kuidas luua staatilist blogi, kasutades kaktust [OS X]

Kuidas luua tugev parool (ja mäletan seda)

Otsetee loomine DNS-serveri muutmiseks Windowsis

Järgmine artikkel

Kuidas luua tarkvara RAID-array Windows 7-s

Eelmine artikkel

Windowsi värskenduse otsetee loomine Windows 10-s