Hoe een eenvoudige telefoonnummerkiezer te maken
Telefoonnummers, naast namen en e-mails, zijn de meest gebruikte contactgegevens in online formulieren. Telefoonnummervelden zijn meestal zo ontworpen dat gebruikers de nummers moeten invoeren bij het gebruik van hun toetsenborden. Deze methode resulteert vaak in onnauwkeurige gegevensinvoer.
Naar verminder invoerfouten en om de gebruikerservaring van uw site te verbeteren, kunt u een GUI waarmee gebruikers snel hun telefoonnummer kunnen invoeren, op een manier die vergelijkbaar is met datumkiezers.
In deze zelfstudie ziet u hoe voeg een eenvoudige telefoonnummerkiezer toe aan een invoerveld. We gebruiken HTML5, CSS3 en JavaScript om naar de GUI te gaan die u kunt zien en testen in de onderstaande demo. We zullen ook reguliere expressies gebruiken om ervoor te zorgen dat gebruikers echt een geldig telefoonnummer invoeren.
1. Maak het veld Telefoonnummer
Eerste, maak een invoerveld met een kiespictogram aan de rechterkant dat het oproepscherm op klik opent. Het wijzerpictogram ziet er net uit als 9 zwarte vakken, die 3 bij 3 zijn gerangschikt, moeten bevallen wat je op een gewone telefoon ziet.
Ik gebruik de tel invoertype voor juiste HTML5-semantiek, maar u kunt ook de tekst invoertype als je wilt.
2. Creëer het kiesscherm
De kies scherm is een raster van cijfers van 0 tot 9 plus enkele speciale karakters. Het kan worden gemaakt met ofwel een HTML Hier laat ik u zien hoe u de kiesschermtabel maakt in JavaScript. U kunt de tabel natuurlijk direct in de HTML-broncode toevoegen als u daar de voorkeur aan geeft. Maak eerst een nieuw Voeg een ... toe De twee De laatste rij is anders, omdat deze bestaat uit twee speciale karakters, Om de laatste rij naar het belscherm te maken, voegt u het volgende toe De draaischijf is nu voltooid, voeg het toe aan de Om het aantrekkelijker te maken, stijl het wijzerplaatscherm met CSS. Je hoeft niet per se bij mijn styling te blijven, maar vergeet dat niet toevoegen Voeg eerst de Voeg vervolgens een klikgebeurtenishandler toe aan het kiespictogram met JavaScript naar schakel de zichtbaarheid in van het kiesscherm. Om dit te doen, moet u het bovengenoemde gebruiken De Voeg een aangepaste functie toe die voert cijfers in het veld met het telefoonnummer in op de klik van de cellen van het kiesscherm. De Nu, u hebt een werkende wijzerplaat om een telefoonnummerveld in te voeren. Om bij te blijven met de CSS, verander de achtergrondkleur van de cijfers in hun Voeg een ... toe eenvoudige regex-validatie om het telefoonnummer te valideren terwijl de gebruiker voert de cijfers in het invoerveld in. Volgens de validatieregels die ik gebruik, kan het telefoonnummer alleen beginnen met een cijfer of het U kunt de visualisatie van mijn reguliere expressie op de hieronder getoonde schermweergave bekijken met de Debuggex-app. U kunt het telefoonnummer ook valideren volgens het telefoonnummerformaat van uw land of regio. Maak een nieuw Regular Expression-object en sla het op in de Wanneer de invoer niet valideert, is de Im een rode rand toevoegen naar het invoerveld als de invoer ongeldig is, maar u kunt de gebruiker op andere manieren informeren, bijvoorbeeld met foutmeldingen. De Merk op dat ik ook een heb toegevoegd aanvullende validatie voor maximale tekens (kan niet meer zijn dan 15) met behulp van een Jouw telefoonnummer kiezer is nu klaar, bekijk de laatste demo hieronder. of JavaScript.
'tafel' element in de DOM door de createElement () methode. Geef het ook het 'wijzerplaat' identifier. / * Creëer kiesscherm * / var dial = document.createElement ('table'); dial.id = 'kiezen'; voor lus om de vier rijen van de kiestabel ermee in te voegen. Vervolgens voor elke rij, een andere uitvoeren voor lus om drie cellen per rij toe te voegen. Markeer elke cel met de 'DialDigit' klasse. for (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();
voor loops berekenen hierboven de cijfers die in de cellen van de kiestabel gaan - de waarden van de cell.textContent eigendom - op de volgende manier: (colNum + 1) + (rowNum * 3) / * eerste rij * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + ( 0 * 3) = 3 / * tweede rij * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * etc. * /
- en + die worden gebruikt in telefoonnummerformaten om regionale codes en het cijfer te identificeren 0.als verklaring voor de innerlijke voor lus. for (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-container die u in stap 1 hebt gemaakt met behulp van twee DOM-methoden:querySelector () methode om selecteer de containerappendChild () methode om het kiesscherm toevoegen - gehouden in de wijzerplaat variabele - naar de container document.querySelector ( '# dialWrapper') appendChild (dial).;
3. Stijl het kiesscherm
user-select: none; eigendom van de #wijzerplaat houder zodat, terwijl de gebruiker op de cijfers klikt, de tekst wordt niet geselecteerd door de cursor. #dial width: 200px; hoogte: 200 px; border-collapse: collapse; text-align: center; positie: relatief; -ms-user-select: none; -webkit-user-select: geen; -moz-user-select: none; gebruikersselectie: geen; kleur: # 000; vakschaduw: 0 0 6px # 999; .dialDigit border: 1px solid #fff; cursor: pointer; achtergrondkleur: rgba (255,228,142, 7);
4. Toon het belscherm bij klikken
visibility: hidden; style rule to #wijzerplaat in de bovenstaande CSS naar verberg het kiesscherm standaard. het wordt alleen weergegeven wanneer de gebruiker op het pictogram van het nummer klikt.querySelector () en de addEventListener () methoden. Het laatste maakt een klikgebeurtenis aan naar het pictogram en bel de aangepaste toggleDial () functie.toggleDial () functie verandert de zichtbaarheid van het kiesscherm van verborgen naar zichtbaar en terug. document.querySelector ('# dialIcon'). addEventListener ('klik', toggleDial); function toggleDial () dial.style.visibility = dial.style.visibility === 'hidden' || dial.style.visibility === "? 'visible': 'hidden'; 5. Voeg de functionaliteit toe
nummer draaien() functie voegt de cijfers één voor één toe naar de textContent eigenschap van het invoerveld gemarkeerd met de #telefoon nr identifier. phoneNo = document.querySelector ('# phoneNo'); functie dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ('. dialDigit'); voor (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); : hover en :actief (wanneer de gebruiker erop klikt). .dialDigit: hover background-color: rgb (255,228,142); .dialDigit: active background-colour: # FF6478;
6. Validatie van reguliere expressie toevoegen
+ karakter, en accepteer de - teken achteraf.
patroon variabel. Maak ook een aangepast valideren () functie die controleert of het ingevoerde telefoonnummer voldoet aan de reguliere expressie, en als dat zo is minstens 8 tekens lang.valideren () functie moet geef feedback voor de gebruiker. pattern = new RegExp ("^ (\\ + \\ d 1,2)? (\\ d + \\ - * \\ d +) * $"); functie valideren (txt) // minstens 8 tekens voor een geldig telefoonnummer. if (! pattern.test (txt) || txt.length < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Voer de validatie uit
valideren () functies moet worden gebeld om de validatie uit te voeren. Noem het van de nummer draaien() functie die u in stap 5 hebt gemaakt om de waarde van de te valideren telefoon nr veranderlijk.als uitspraak. functie dialNumber () var val = phoneNo.value + this.textContent; // maximum toegestane karakters, 15 indien (val.length> 15) return false; valideren (val); phoneNo.value = val;
