Hvordan lage en enkel telefonnummervælger
Telefonnummer, foruten navn og e-post, er de mest brukte kontaktinformasjonene i elektroniske skjemaer. Telefonnummerfelt er vanligvis utformet på en måte som krever at brukerne skriver inn tallene ved bruk av tastaturene. Denne metoden resulterer ofte i unøyaktig datainngang.
Til redusere brukerinngangsfeil og forbedre brukeropplevelsen av nettstedet ditt, kan du opprette en GUI som gjør at brukerne raskt kan skrive inn sitt telefonnummer, på en måte som ligner på datoplukkere.
I denne veiledningen vil du se hvordan legg til en enkel telefonnummerväljare til et inntastingsfelt. Vi bruker HTML5, CSS3 og JavaScript for å komme til den GUI du kan se og teste i demoen nedenfor. Vi vil også sette regelmessige uttrykk i bruk for å sikre at brukerne virkelig skriver inn et gyldig telefonnummer.
1. Opprett telefonnummerfeltet
Først, opprett et inntastingsfelt med et knappikon på høyre side som åpner oppringingsskjermen på klikk. Dial-ikonet ser akkurat ut som 9 svarte bokser, arrangert 3 av 3, må likne det du ser på en vanlig telefon.
Jeg bruker tlf inngangstype for riktig HTML5 semantikk, men du kan også bruke tekst inngangstype hvis du vil.
2. Lag oppringingsskjermbildet
De oppringingsskjerm er et rutenett av tall fra 0 til 9 pluss noen spesialtegn. Det kan gjøres med enten en HTML Her viser jeg deg hvordan du oppretter oppringingsbordet i JavaScript. Du kan selvsagt legge til tabellen direkte i HTML-kildekoden hvis du foretrekker det på den måten. Først opprett en ny Legg til en De to Den siste raden er annerledes, som den består av to spesialtegn, For å opprette siste rad til oppringingsskjermen legger du til følgende De oppringingsskjermen er nå fullført, legg det til For å gjøre det mer attraktivt, stil på skjermbildet med CSS. Du trenger ikke nødvendigvis å holde fast i stylingen min, men ikke glem å Legg til Først legger du til Deretter legger du til en hendelseshåndterer til klikk på ikonet med JavaScript til skift synligheten på skjermbildet. For å gjøre det, må du bruke ovennevnte De Legg til en egendefinert funksjon som skriver inn sifre i telefonnummerfeltet på klikk på cellene på oppringingsskjermen. De Nå har du en arbeider oppringingsskjerm for å skrive inn telefonnummerfelt. For å holde tritt med CSS, endre bakgrunnsfargen på sifrene i deres Legg til en enkel regex validering for å validere telefonnummeret mens brukeren går inn i sifrene i inntastingsfeltet. I henhold til valideringsreglene jeg bruker, kan telefonnummeret bare starte med enten et siffer eller Du kan se visualiseringen av mitt vanlige uttrykk på skjermbildet nedenfor opprettet med Debuggex-appen. Du kan også validere telefonnummeret i henhold til telefonnummerformatet til ditt land eller din region. Opprett et nytt Regular Expression-objekt, og lagre det i Når inngangen ikke validerer, vil Jeg er legger til en rød kant til inngangsfeltet når inngangen er ugyldig, men du kan informere brukeren på andre måter, for eksempel med feilmeldinger. De Legg merke til at jeg også lagt til en ytterligere validering for maksimale tegn (kan ikke være mer enn 15) ved å bruke en Din telefonnummer plukker er nå klar, sjekk ut den endelige demoen nedenfor. eller JavaScript.
'bord' element i DOM ved å bruke createElement () metode. Gi også den 'slå' identifikator. / * Lag oppringingsskjerm * / var dial = document.createElement ('table'); dial.id = 'dial'; til sløyfe å sette inn de fire radene på oppringtabellen med den. Deretter for hver rad, Kjør en annen til sløyfe for å legge til tre celler per rad. Merk 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 sløyfer over beregne sifrene som går inn i cellene på oppringtabellen - verdiene til cell.textContent eiendom - på følgende måte: (kolNum + 1) + (radNum * 3) / * første rad * / (0 + 1) + (0 * 3) = 1 (1 + 1) + (0 * 3) = 2 (2 + 1) + 0 * 3) = 3 / * andre rad * / (0 + 1) + (1 * 3) = 4 (1 + 1) + (1 * 3) = 5 (2 + 1) + (1 * 3) = 6 / * etc. * /
- og + som brukes i telefonnummerformater for å identifisere regionale koder og sifferet 0.hvis uttalelse til det indre til sløyfe. 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 opprettet i trinn 1 ved hjelp av to DOM-metoder:querySelector () metode til velg beholderenappendChild () metode til legg til oppringingsskjermen - holdt i slå variabel - til beholderen document.querySelector ( '# dialWrapper') appendChild (dial.);
3. Stil oppringingsskjermen
bruker velge: none; eiendom til #slå container slik at mens brukeren klikker på sifrene, er teksten vil ikke bli valgt av markøren. #dial width: 200px; høyde: 200px; border-collapse: collapse; tekstjustering: center; posisjon: relativ; -ms-bruker-velg: ingen; -webkit-bruker-velg: ingen; -moz-user-select: none; brukervalg: ingen; farge: # 000; boks-skygge: 0 0 6px # 999; .dialDigit border: 1px solid #fff; markør: pointer; bakgrunnsfarge: rgba (255.228.142, .7);
4. Vis Dial Screen på Klikk
synlighet: skjult; stil regelen til #slå i ovennevnte CSS til skjul dialskjermbildet som standard. Det blir bare vist når brukeren klikker på ringesignalet.querySelector () og addEventListener () metoder. Sistnevnte Fester en klikkhendelse til oppringingsikonet og kaller egendefinert toggleDial () funksjon.toggleDial () funksjon endrer synligheten på skjermbildet fra skjult til synlig og tilbake. document.querySelector ('# dialIcon'). addEventListener ('klikk', toggleDial); funksjon toggleDial () dial.style.visibility = dial.style.visibility === 'skjult' || dial.style.visibility === "?" synlig ":" skjult "; 5. Legg til funksjonaliteten
slå nummer() funksjon legger til tallene en etter en til textcontent Egenskapen til inngangsfeltet merket med #telefonnr identifikator. phoneNo = document.querySelector ('# phoneNo'); funksjon dialNumber () phoneNo.value + = this.textContent; dialDigits = document.querySelectorAll ('. dialDigit'); for (var i = 0; i < dialDigits.length; i++) dialDigits[i].addEventListener('click', dialNumber); :sveve og :aktiv (når brukeren klikker på den) angir. .dialDigit: svever bakgrunnsfargen: rgb (255,228,142); .dialDigit: aktiv bakgrunnsfarge: # FF6478;
6. Legg til regelmessig uttrykksvalidering
+ tegn, og godta - tegn etterpå.
mønster variabel. Lag også en egendefinert validere() funksjon som kontrollerer om det angitte telefonnummeret oppfyller det vanlige uttrykket, og hvis det er det minst 8 tegn lang.validere() funksjonen må gi tilbakemelding til brukeren. mønster = nytt RegExp ("^ (\\ + \\ d 1,2)? (\\ d + \\ - * \\ d +) * $"); funksjon validere (txt) // minst 8 tegn for 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. Utfør valideringen
validere() funksjoner må kalles for å utføre valideringen. Ring det fra slå nummer() funksjonen du opprettet i trinn 5 for å validere verdien av telefonnr variabel.hvis uttalelse. funksjon dialNumber () var val = phoneNo.value + this.textContent; // maksimale tegn tillatt, 15 hvis (val.length> 15) returnerer false; validere (Val); phoneNo.value = val;
