Hur man skapar en enkel telefonnummerväljare
Telefonnummer, förutom namn och e-post, är de mest använda kontaktuppgifterna i onlinevärden. Telefonnummerfält är vanligtvis utformade på ett sätt som kräver att användarna skriver in siffrorna vid användning av sina tangentbord. Denna metod resulterar ofta i felaktig dataingång.
Till minska användarens inmatningsfel och förbättra användarupplevelsen på din webbplats kan du skapa en GUI som tillåter användare att snabbt skriva in sitt telefonnummer, på ett sätt som liknar datumplockare.
I denna handledning ser du hur du ska lägg till en enkel telefonnummerväljare till ett inmatningsfält. Vi använder HTML5, CSS3 och JavaScript för att komma till den GUI du kan se och testa i demo nedan. Vi använder också vanliga uttryck för att se till att användarna verkligen anger ett giltigt telefonnummer.
1. Skapa telefonnummerfältet
Först, skapa ett inmatningsfält med en rattikon till höger som öppnar rattskärmen på klicka. Dial-ikonen ser bara ut som 9 svarta lådor, arrangerade 3 av 3, måste likna vad du ser på en vanlig telefon.
Jag använder tel inmatningstyp för korrekt HTML5 semantik, men du kan också använda text ingångstyp om du vill.
2. Skapa dial-skärmen
De uppringningsskärm är ett rutnät av siffror från 0 till 9 plus några specialtecken. Den kan tillverkas med antingen en HTML Här ska jag visa hur du skapar skärmtabellen i JavaScript. Du kan självklart lägga till tabellen direkt i HTML-källkoden om du föredrar det på så sätt. Skapa först en ny Lägg till en De två Den sista raden är annorlunda, som den består av två specialtecken, För att skapa den sista raden på skärmen, lägg till följande De Dial-skärmen är nu klar, lägg till den i För att göra det mer attraktivt, stil dialskärmen med CSS. Du behöver inte nödvändigtvis hålla fast vid min styling, men glöm inte att Lägg till Lägg först till Lägg sedan till en händelsehanterare för klick på dial-ikonen med JavaScript till växla synligheten på skärmen. För att göra det måste du använda ovanstående De Lägg till en anpassad funktion som matar in siffror i telefonnummerfältet på klicket på cellerna på uppringningsskärmen. De Nu har du en arbetsskärmskärm för att mata in telefonnummerfältet. För att följa med CSS, ändra bakgrundsfärgen på siffrorna i deras Lägg till en enkel regex validering att validera telefonnumret medan användaren anger siffrorna i inmatningsfältet. Enligt de valideringsregler som jag använder kan telefonnumret bara börja med antingen en siffra eller Du kan se visualiseringen av mitt vanliga uttryck på skärmbilden nedan skapad med Debuggex-appen. Du kan också validera telefonnumret enligt telefonnumret för ditt land eller region. Skapa ett nytt Regular Expression-objekt och lagra det i När inmatningen inte valideras, Jag är lägger till en röd kant till inmatningsfältet när inmatningen är ogiltig, men du kan informera användaren på andra sätt, till exempel med felmeddelanden. De Observera att jag också lagt till en ytterligare validering för maximala tecken (kan inte vara mer än 15) med hjälp av en Din telefonnummerväljare är nu klar, kolla in den slutliga demo nedan. eller JavaScript.
'tabell' element i DOM genom att använda create () metod. Ge också den 'ringa' identifierare. / * Skapa uppringningsskärm * / var dial = document.createElement ('table'); dial.id = 'dial'; för slinga för att infoga de fyra raderna på uppringningsbordet med den. Sedan, för varje rad, springa en annan för slinga för att lägga till tre celler per rad. Markera varje cell med 'DialDigit' klass. för (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();
för loopar ovan beräknar de siffror som går in i dialettens celler - värdena på cell.textContent egendom - på följande sätt: (kolNum + 1) + (radNum * 3) / * första raden * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + 0 * 3) = 3 / * andra raden * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * etc. * /
- och + som används i telefonnummerformat för att identifiera regionala koder och siffran 0.om uttalande till det inre för slinga. för (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();
#dialWrapper HTML-behållaren du skapade i steg 1 med hjälp av två DOM-metoder:querySelector () metod till välj behållarenappendChild () metod till lägg till skärmmenyn - hölls i ringa variabel - till behållaren document.querySelector (# dialWrapper) appendChild (ringa).
3. Stil uppringningsskärmen
användar välj: none; egendom till #ringa behållare så att medan användaren klickar på siffrorna, texten kommer inte att väljas av markören. #dial width: 200px; höjd: 200px; gränskollaps: kollaps text-align: center; position: relativ; -ms-användare-välj: ingen; -webkit-användar-välj: ingen; -moz-user-select: none; användarvälj: ingen; färg: # 000; boxskugga: 0 0 6px # 999; .dialDigit border: 1px solid #fff; markör: pekare; bakgrundsfärg: rgba (255.228.142, .7);
4. Visa uppringningsskärmen på Klicka
visibility: hidden; stil regel till #ringa i ovanstående CSS till göm skärmskärmen som standard. Det visas bara när användaren klickar på dial-ikonen.querySelector () och den addeventlistener () metoder. Den senare fäster ett klickhändelse till ringsymbolen och kallar anpassningen toggleDial () fungera.toggleDial () fungera ändrar synligheten på skärmskärmen från dold till synlig och bakåt. document.querySelector ('# dialIcon'). addEventListener ('click', toggleDial); funktion toggleDial () dial.style.visibility = dial.style.visibility === 'hidden' || dial.style.visibility === "? visible": "hidden"; 5. Lägg till funktionaliteten
slå nummer() fungera lägger till siffrorna en efter en till textcontent egenskap av ingångsfältet markerat med #telefonnr identifierare. phoneNo = document.querySelector ('# phoneNo'); funktion dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ('. dialDigit'); för (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); :sväva och :aktiva (när användaren klickar på den) anges. .dialDigit: svep bakgrundsfärg: rgb (255,228,142); .dialDigit: aktiv bakgrundsfärg: # FF6478;
6. Lägg till Regular Expression Validation
+ tecken och acceptera - tecken efteråt.
mönster variabel. Skapa också en anpassad bekräfta() funktion som kontrollerar om det angivna telefonnumret överensstämmer med det reguljära uttrycket, och om det är det minst 8 tecken långt.bekräfta() funktion behöver ge feedback till användaren. mönster = nytt RegExp ("^ (\\ + \\ d 1,2)? (\\ d + \\ - * \\ d +) * $"); funktion validera (txt) // minst 8 tecken för ett giltigt telefonnummer. om (! pattern.test (txt) || txt.length < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Utför validering
bekräfta() funktioner måste ringas för att utföra valideringen. Ring det från slå nummer() funktionen du skapade i steg 5 för att validera värdet av telefonnr variabel.om påstående. funktion dialNumber () var val = phoneNo.value + this.textContent; // högsta tillåtna tecken, 15 om (val.längd> 15) returnerar false; validera (Val); phoneNo.value = val;
