Yksinkertaisen puhelinnumeronvalitsimen luominen

Puhelinnumerot, nimien ja sähköpostiviestien lisäksi ovat useimmin käytetyt online-lomakkeiden yhteystiedot. Puhelinnumerokentät suunnitellaan tavallisesti siten, että käyttäjät kirjoittavat numerot näppäimistönsä avulla. Tämä menetelmä johtaa usein virheelliseen tietojen syöttämiseen.

jotta vähentää käyttäjän syöttövirheitä ja parantaa sivuston käyttökokemusta, voit luoda a GUI jonka avulla käyttäjät voivat nopeasti syöttää puhelinnumeronsa tavalla, joka on samanlainen kuin päivämääränvalitsimet.

Tässä opetusohjelmassa näet miten lisää yksinkertainen puhelinnumeronvalitsin syöttökenttään. Käytämme HTML5: ää, CSS3: ta ja JavaScript: ää päästäksesi GUI: hen, jota voit nähdä ja testata alla olevassa demossa. Käytämme myös säännöllisiä lausekkeita varmistaaksemme, että käyttäjät todella syöttävät kelvollisen puhelinnumeron.

1. Luo puhelinnumerokenttä

Ensimmäinen, luo syöttökenttä oikeassa valintakuvakkeessa, joka avaa valintanäytön napsautuksella. Valintakuvake näyttää vain 9 mustalta laatikosta, jotka on järjestetty 3: sta 3: een. Niiden pitää olla tavalliseen puhelimeen nähden.

Käytän puh oikean HTML5-semantiikan syöttötyyppi, mutta voit käyttää myös teksti syöttötyyppi, jos haluat.

2. Luo Dial-näyttö

valintanäyttö on ruudukko numeroita 0 - 9 plus joitakin erikoismerkkejä. Se voidaan tehdä joko HTML

Tässä näytän sinulle, miten voit luoda valintanäytön taulukon JavaScriptissä. Voit tietenkin lisätä taulukon suoraan HTML-lähdekoodiin, jos haluat sen.

Luo ensin uusi 'pöytä' elementti DOM käyttämällä createElement () menetelmä. Anna myös se 'Dial' tunnisteen.

 / * Luo valintanäyttö * / var dial = document.createElement ('taulukko'); dial.id = 'dial'; 

Lisää varten silmukka aseta valintataulukon neljä riviä. Sitten jokaiselle riville, aja toinen varten silmukka lisätään kolme solua per rivi. Merkitse jokainen solu kanssa 'DialDigit' luokka.

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

Kaksi varten yllä olevat silmukat laskevat numerot, jotka menevät valintataulun soluihin - cell.textContent omaisuus - seuraavalla tavalla:

 (colNum + 1) + (riviNum * 3) / * ensimmäinen rivi * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + ( 0 * 3) = 3 / * toinen rivi * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * jne. * / 

Viimeinen rivi on erilainen, koska se koostuu kaksi erikoismerkkiä, - ja + joita käytetään puhelinnumeromuotoina alueellisten koodien tunnistamiseksi ja numeroa 0.

Jos haluat luoda viimeisen rivin valintanäyttöön, lisää seuraava jos lausunto sisäpuolelle varten silmukka.

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

valintanäyttö on nyt valmis, lisää se #dialWrapper HTML-kontti, jonka olet luonut vaiheessa 1 käyttämällä kaksi DOM-menetelmää:

1. querySelector () menetelmä valitse säiliö
2. AppendChild () menetelmä lisää valintanäyttö - pidetään valitsin - säiliöön

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

3. Tyyliä Dial-näyttö

Jotta se olisi houkuttelevampi, tyyli valintanäyttö CSS: n kanssa.

Sinun ei tarvitse välttämättä pitää kiinni tyylistäni, mutta älä unohda lisätä käyttäjän valita: ei mitään; omaisuutta #dial kontti jotta käyttäjä napsauttaa numeroita, teksti kohdistin ei valitse sitä.

 #dial leveys: 200px; korkeus: 200px; raja-romahtaminen: romahtaminen; text-align: center; asema: suhteellinen; -ms-user-select: ei; -webkit-user-select: ei; -moz-user-select: ei; user-select: ei; väri: # 000; box-shadow: 0 0 6px # 999;  .dialDigit border: 1px solid #fff; kohdistin: osoitin; taustaväri: rgba (255,228,142, .7);  

4. Näytä valintaikkuna napsauttamalla

Lisää ensin näkyvyys: hidden; tyyli sääntö #dial yllä olevassa CSS: ssä että piilota valintanäyttö oletuksena. se näkyy vain, kun käyttäjä napsauttaa valintakuvaketta.

Lisää sitten napsautuksen tapahtumakäsittelijä valintakuvakkeeseen JavaScriptin avulla että vaihtaa näkyvyyttä valintanäytön.

Tätä varten sinun on käytettävä edellä mainittua querySelector () ja addEventListener () menetelmiä. Jälkimmäinen liittää napsautustapahtuman soittaa kuvakkeeseen ja kutsuu mukautetun toggleDial () toimia.

toggleDial () toimia muuttaa näkyvyyttä valintanäytön piilossa näkyviin ja takaisin.

 document.querySelector ('# dialIcon'). addEventListener ('click', toggleDial); toiminto toggleDial () dial.style.visibility = dial.style.visibility === 'piilotettu' || dial.style.visibility === "?" näkyvä ":" piilotettu "; 

5. Lisää toiminnallisuus

Lisää mukautettu toiminto syöttää numeroita puhelinnumerokenttään valintanäytön solujen napsautuksella.

Näppäile numero() toimia lisää numerot yksitellen että textContent merkinnällä varustetun syöttökentän ominaisuus #puhelin ei tunnisteen.

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

Nyt sinulla on a työvalintaikkuna syöttää puhelinnumerokenttä.

Jos haluat pysyä CSS: n kanssa, vaihda niiden numeroiden taustaväri : hover ja : aktiivinen (kun käyttäjä napsauttaa sitä).

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

6. Lisää säännöllisen lausekkeen vahvistus

Lisää yksinkertainen regex-validointi vahvistaaksesi puhelinnumeron, kun käyttäjä on syöttää numerot syöttökenttään. Käytettyjen validointisääntöjen mukaan puhelinnumero voi alkaa vain numerolla tai + ja hyväksy - jälkeen.

Voit tarkastella säännöllisen lausekkeen visualisointia alla olevalla näytöllä, joka on luotu Debuggex-sovelluksella.

Voit myös vahvistaa puhelinnumerosi maan tai alueen puhelinnumeromuodon mukaan.

Luo uusi säännöllisen lausekkeen kohde ja tallenna se kuvio muuttuja. Luo myös muokattu vahvista () toiminto, joka tarkistaa syötetyn puhelinnumeron noudattaa säännöllistä lauseketta, ja jos se on vähintään 8 merkkiä pitkä.

Kun tulo ei vahvista, vahvista () toiminto tarvitsee antaa palautetta käyttäjälle.

Olen punaisen reunan lisääminen syöttökenttään, kun tulo on virheellinen, mutta voit ilmoittaa käyttäjälle esimerkiksi muilla tavoin virheilmoituksilla.

 kuvio = uusi RegExp ("^ (d 1,2) y (d + * * + +) * $"); toiminto validoi (txt) // vähintään 8 merkkiä kelvolliselle puhelinnumerolle. jos (! pattern.test (txt) || txt.length) < 8)  phoneNo.style.border = '2px solid red'; return false;  else phoneNo.style.border = 'initial'; return true;  

7. Suorita validointi

vahvista () tehtävät täytyy kutsua voidakseen suorittaa validoinnin. Soita se Näppäile numero() toiminto, jonka olet luonut vaiheessa 5 voidaksesi vahvistaa arvon puhelin ei muuttuja.

Huomaa, että lisäsin myös lisää validointia maksimi merkkejä (ei voi olla yli 15) käyttämällä jos selvitys.

 toiminto dialNumber () var val = phoneNo.value + this.textContent; // sallitut enimmäismerkit, 15 jos (pituus> 15) palaa vääriä; vahvistaa (val); phoneNo.value = val;  

teidän puhelinnumeronvalitsin on nyt valmis, tutustu alla olevaan lopulliseen demoon.

Staattisen blogin luominen kaktuksella [OS X]

Vahvan salasanan luominen (ja muista se)

Pikakuvakkeen luominen DNS-palvelimen vaihtamiseksi Windowsissa

Seuraava artikkeli

Ohjelmiston RAID-arkiston luominen Windows 7 ssä

Edellinen artikkeli

Pikanäppäimen luominen Windows-päivitykseen Windows 10 ssä