Sådan oprettes en simpel telefonnummervælger
Telefonnumre, udover navne og e-mails, er de hyppigst anvendte kontaktoplysninger i online-formularer. Telefonnummerfelter er normalt designet på en måde, der kræver, at brugerne indtaster tallene ved brug af deres tastaturer. Denne metode resulterer ofte i unøjagtige dataindtastninger.
Til reducere brugerfejlfejl og forbedre brugeroplevelsen af dit websted, kan du oprette en GUI som giver brugerne mulighed for hurtigt at indtaste deres telefonnummer på en måde, der ligner dataplukkere.
I denne vejledning kan du se hvordan tilføj en simpel telefonnummervælger til et indtastningsfelt. Vi bruger HTML5, CSS3 og JavaScript for at komme til den GUI, du kan se og teste i demoen nedenfor. Vi sætter også regelmæssige udtryk i brug for at sikre, at brugerne virkelig indtaster et gyldigt telefonnummer.
1. Opret telefonnummerfeltet
Først, Opret et inputfelt med et opkald ikon til højre, der åbner opkaldsskærmen ved klik. Dial-ikonet ligner kun 9 sorte kasser, der er arrangeret 3 til 3, skal lide det, du ser på en almindelig telefon.
Jeg bruger tel input type til korrekt HTML5 semantik, men du kan også bruge tekst indtastningstype, hvis du vil have det.
2. Opret opkaldsknappen
Det dial skærm er et gitter af tal fra 0 til 9 plus nogle specialtegn. Det kan laves med enten en HTML Her vil jeg vise dig, hvordan du opretter skærmbordsskemaet i JavaScript. Du kan selvfølgelig tilføje tabellen direkte i HTML-kildekoden, hvis du foretrækker det på den måde. Opret først en ny Tilføj en De to Den sidste række er anderledes, som den består af to specialtegn, For at oprette den sidste række til opkaldsskærmen, tilføj følgende Det dial screen er nu færdig, tilføj det til At gøre det mere attraktivt, stil opkaldsknappen med CSS. Du behøver ikke nødvendigvis at holde fast i min styling, men glem ikke at tilføje Først skal du tilføje Tilføj derefter en klikhændelseshandler til opkaldsikonet med JavaScript til skifte synlighed af opkaldsskærmen. For at gøre det skal du bruge ovennævnte Det Tilføj en brugerdefineret funktion som Indlæser cifre i telefonnummerfeltet på klik på cellerne på opkaldsskærmen. Det Nu har du en arbejdskaldsskærm at indtaste telefonnummerfelt. For at holde trit med CSS skal du ændre baggrundsfarven på cifrene i deres Tilføj en simpel regex validering at validere telefonnummeret mens brugeren Indtaster cifrene i inputfeltet. I henhold til de valideringsregler, jeg bruger, kan telefonnummeret kun starte med enten et ciffer eller Du kan se visualiseringen af mit regulære udtryk på skærmbilledet nedenfor, der er oprettet med Debuggex-appen. Du kan også validere telefonnummeret som telefonnummerformatet for dit land eller din region. Opret et nyt Regular Expression-objekt, og gem det i Når input ikke validerer, Jeg er tilføjer en rød ramme til indtastningsfeltet, når indtastningen er ugyldig, men du kan informere brugeren på andre måder, for eksempel med fejlmeddelelser. Det Bemærk at jeg også tilføjede en yderligere validering for maksimale tegn (kan ikke være mere end 15) ved hjælp af en Dine telefonnummer picker er nu klar, se den endelige demo nedenfor. eller JavaScript.
'bord' element i DOM ved at bruge createElement () metode. Giv det også det 'urskive' id. / * Opret opkaldskærm * / var dial = document.createElement ('table'); dial.id = 'dial' til løkke at indsætte de fire rækker af opkaldstabellen med den. Så for hver række, køre en anden til løkke for at tilføje tre celler pr. række. Marker hver celle med '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();
til loops ovenfor beregne de cifre, der går ind i cellerne på opkaldstabellen - værdierne for cell.textContent ejendom - på følgende måde: (kolNum + 1) + (radNum * 3) / * første række * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + 0 * 3) = 3 / * anden række * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * osv. * /
- og + der bruges i telefonnummerformater til at identificere regionale koder og cifferet 0.hvis erklæring til det indre til løkke. 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, du oprettede i trin 1 ved hjælp af to DOM metoder:querySelector () metode til vælg beholderenappendChild () metode til tilføj opkaldsskærmen - afholdt i urskive variabel - til beholderen document.querySelector ( '# dialWrapper') appendChild (dial.);
3. Indstil opkaldsknappen
bruger-vælger: none; ejendom til #urskive beholder så at mens brugeren klikker på cifrene, er teksten vil ikke blive markeret af markøren. #dial width: 200px; højde: 200px; grænsekollaps: sammenbrud tekst-align: center; stilling: relativ; -ms-bruger-vælg: none; -webkit-bruger-vælg: none; -moz-user-select: none; brugervalg: ingen; farve: # 000; box-skygge: 0 0 6px # 999; .dialDigit border: 1px solid #fff; markør: pointer; baggrundsfarve: rgba (255.228.142, .7);
4. Vis dial-skærmen på Klik
visibility: hidden; stil regel til #urskive i ovenstående CSS til skjul skærmbilledet som standard. det vises kun, når brugeren klikker på opkaldets ikon.querySelector () og addEventListener () metoder. Det sidste Tilføjer et klikhændelse til opkaldsikonet og kalder brugerdefineret toggleDial () fungere.toggleDial () fungere ændrer synligheden af skærmbilledet fra skjult til synligt og tilbage. document.querySelector ('# dialIcon'). addEventListener ('klik', toggleDial); funktion toggleDial () dial.style.visibility = dial.style.visibility === 'skjult' || dial.style.visibility === "? synlig": "skjult"; 5. Tilføj funktionaliteten
dialNumber () fungere tilføjer cifrene en efter en til textContent egenskab af inputfeltet markeret med #telefon Nej id. phoneNo = document.querySelector ('# phoneNo'); funktion dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ('. dialDigit'); for (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); : hover og :aktiv (når brugeren klikker på den) angiver. .dialDigit: svever baggrundsfarve: rgb (255.228.142); .dialDigit: aktiv baggrundsfarve: # FF6478;
6. Tilføj Regular Expression Validation
+ karakter og acceptere - karakter bagefter.
mønster variabel. Opret også en brugerdefineret validere () funktion, der kontrollerer om det indtastede telefonnummer overholder det regulære udtryk, og hvis det er det mindst 8 tegn lang.validere () funktion skal give tilbagemelding til brugeren. mønster = nyt RegExp ("^ (\\ + \\ d 1,2)? (\\ d + \\ - * \\ d +) * $"); funktion validere (txt) // mindst 8 tegn til en gyldig telefon nr. hvis (! pattern.test (txt) || txt.length < 8) phoneNo.style.border = '2px solid red'; return false; else phoneNo.style.border = 'initial'; return true; 7. Udfør valideringen
validere () funktioner skal kaldes for at udføre valideringen. Kald det fra dialNumber () funktion du oprettede i trin 5 for at validere værdien af telefon Nej variabel.hvis udmelding. funktion dialNumber () var val = phoneNo.value + this.textContent; // maksimale tegn tilladt, 15 hvis (val.length> 15) returnerer false; validere (val); phoneNo.value = val;
