Hogyan készítsünk egy egyszerű telefonszámot
Telefonszámok, a nevek és e-mailek mellett a leggyakrabban használt online elérhetőségi adatok. A telefonszámok mezőket általában úgy tervezték, hogy a felhasználók a billentyűzetük használatával írják be a számokat. Ez a módszer gyakran hibás adatbevitelhez vezet.
Nak nek csökkentse a felhasználói beviteli hibákat és javíthatja webhelyének felhasználói élményét, létrehozhat egy GUI amely lehetővé teszi a felhasználók számára, hogy gyorsan beírják a telefonszámukat, oly módon, hogy hasonló legyen a dátumhoz.
Ebben a bemutatóban megtudhatja, hogyan kell adjon hozzá egy egyszerű telefonszám-választót egy beviteli mezőhöz. HTML5-t, CSS3-t és JavaScript-et fogunk használni a grafikus felhasználói felülethez, amely az alábbi demóban látható és tesztelhető. Rendszeres kifejezéseket is használunk annak érdekében, hogy a felhasználók valóban érvényes telefonszámot adjanak meg.
1. Hozza létre a Telefonszám mezőt
Első, hozzon létre egy beviteli mezőt a jobb oldali tárcsázási ikonnal, amely megnyitja a kattintás képernyőjét. A tárcsázó ikon csak úgy néz ki, mintha 9 fekete doboz lenne, amelyeket 3-tól 3-ig rendeztek.
Én a tel bemeneti típus a megfelelő HTML5 szemantikához, de használhatja a szöveg bemenet típusa, ha akarja.
2. Hozza létre a Tárcsázás képernyőt
A tárcsázási képernyő jelentése a számok rácsát 0-tól 9-ig plusz néhány speciális karakter. Lehet vele vagy HTML Itt megmutatom, hogyan lehet létrehozni a tárcsázási képernyő táblát a JavaScript-ben. Természetesen hozzáadhatja a táblázatot közvetlenül a HTML forráskódhoz, ha úgy tetszik. Először hozzon létre egy újat Add a A két Az utolsó sor különbözik két speciális karakter, Az utolsó sor létrehozásához a tárcsázó képernyőhöz adja hozzá a következőket A a tárcsázási képernyő befejeződött, add hozzá a Ahhoz, hogy vonzóbb legyen, a tárcsázási képernyő stílusát CSS-el. Nem feltétlenül kell ragaszkodnod a stílusomhoz, de ne felejtsd el hozzáad Először adja hozzá a Ezután adjon hozzá egy kattintáses eseménykezelőt a tárcsázási ikonhoz JavaScript használatával nak nek váltani a láthatóságot a tárcsázási képernyőn. Ehhez a fentieket kell használni A Adjon hozzá egy egyéni funkciót beírja a számokat a telefonszám mezőbe a tárcsázó képernyő celláinak kattintásánál. A Most van egy működő tárcsázási képernyő telefonszám beviteléhez. Ahhoz, hogy lépést tartson a CSS-vel, változtassa meg a számjegyek háttérszínét Add a egyszerű regex validálás a telefonszámot a felhasználó jóváhagyása közben belép a számokba a beviteli mezőbe. Az általam használt érvényesítési szabályok szerint a telefonszám csak egy számjegygel vagy a számmal kezdődhet A Debuggex alkalmazással létrehozott képernyőrendszeren látható a rendszeres kifejezésem megjelenítése. A telefonszámot az ország vagy régió telefonszám formátumának megfelelően is érvényesítheti. Hozzon létre egy új rendszeres kifejezés objektumot, és tárolja azt a Amikor a bemenet nem érvényes, a vagyok piros szegély hozzáadása a beviteli mezőbe, amikor a bemenet érvénytelen, de más módon is értesítheti a felhasználót, például hibaüzenetekkel. A Ne feledje, hogy hozzáadtam egy további érvényesítés a maximális karakterek esetén (nem lehet több, mint 15) a A te telefonszám-választó most készen áll, nézd meg az utolsó demót. vagy JavaScript.
'asztal' elem a DOM a createElement () eljárás. Is adjuk meg 'tárcsa' azonosító. / * Tárcsázó képernyő létrehozása * / var dial = document.createElement ('táblázat'); dial.id = 'dial'; mert hurok a tárcsázóasztal négy sorának beillesztéséhez. Ezután minden sorhoz, futtassa a másikot mert hurok soronként három sejt hozzáadásához. Jelöljön minden cellát a ... val 'DialDigit' osztály. for (var rowNum = 0; sorNum < 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();
mert a fenti hurkok kiszámítják a számjegyek számát, amelyek a tárcsázó táblázat celláiba kerülnek - a cell.textContent tulajdonság - a következő módon: (colNum + 1) + (rowNum * 3) / * első sor * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + ( 0 * 3) = 3 / * második sor * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * stb. * /
- és + a telefonszám formátumokban a regionális kódok és a számjegyek 0.ha nyilatkozat a belsőre mert hurok. for (var rowNum = 0; sorNum < 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 Az 1. lépésben létrehozott HTML-tároló a két DOM módszer:querySelector () módszer válassza ki a tartálytAppendChild () módszer csatolja a tárcsázási képernyőt - a tárcsa változó - a tartályba document.querySelector ( '# dialWrapper'). AppendChild (dial);
3. Hajtsa végre a Tárcsázás képernyőt
a felhasználó által válasszon: none; ingatlan a #tárcsa tartály úgy, hogy amíg a felhasználó a számjegyekre kattint, a szöveg nem fog kiválasztani a kurzort. #dial szélesség: 200px; magasság: 200px; határ-összeomlás: összeomlás; szöveg-igazítás: központ; pozíció: relatív; -ms-user-select: nincs; -webkit-user-select: nincs; -moz-user-select: nincs; user-select: nincs; szín: # 000; box-shadow: 0 0 6px # 999; .dialDigit border: 1px szilárd #fff; kurzor: mutató; háttérszín: rgba (255,228,142, .7);
4. Mutasson a Dial képernyőn a Click gombra
visibility: hidden; stílusszabály #tárcsa a fenti CSS-ben nak nek elrejti a tárcsázási képernyőt alapértelmezés szerint. csak akkor jelenik meg, ha a felhasználó a tárcsázó ikonra kattint.querySelector () és a addEventListener () mód. A levél kattintási eseményt csatol a tárcsázó ikonra, és felhívja az egyéni beállítást toggleDial () funkció.toggleDial () funkció megváltoztatja a láthatóságot a tárcsázási képernyő elrejtése láthatóvá és vissza. document.querySelector ('# dialIcon'). addEventListener ('click', toggleDial); funkció toggleDial () dial.style.visibility = dial.style.visibility === "rejtett" || dial.style.visibility === "?" látható ":" rejtett "; 5. Add hozzá a funkcionalitást
dialNumber () funkció hozzáadja a számjegyeket egyenként hoz textContent a beviteli mező tulajdonsága #Telefonszám azonosító. phoneNo = document.querySelector ('# phoneNo'); függvénytárcsázási szám () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ('. dialDigit'); a (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); :lebeg és :aktív (amikor a felhasználó rákattint). .dialDigit: hover háttérszín: rgb (255,228,142); .dialDigit: aktív háttérszín: # FF6478;
6. Adja meg a rendszeres kifejezést
+ karaktert, és fogadja el a - utána.
minta változó. Szintén hozzon létre egy szokást érvényesít() funkció, amely ellenőrzi a megadott telefonszámot megfelel a rendszeres kifejezésnek, és ha igen legalább 8 karakter hosszú.érvényesít() funkciónak szüksége van Adj visszajelzést a felhasználónak. minta = új RegExp ("^ (d 1,2) y (d + * * + +) * $"); funkció érvényesítése (txt) // legalább 8 karakter egy érvényes telefonszámhoz. ha (! pattern.test (txt) || txt.length) < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Végezze el az érvényesítést
érvényesít() funkciók hívni kell az érvényesítés végrehajtásához. Hívd fel dialNumber () az 5. lépésben létrehozott függvény annak érdekében, hogy érvényesítse a Telefonszám változó.ha nyilatkozat. függvény tárcsázási szám () var val = phoneNo.value + this.textContent; // megengedett maximális karakterek, 15 ha (val.length> 15) hamis; érvényesíteni (Val); phoneNo.value = val;
