no.hideout-lastation.com
Paradis For Designere Og Utviklere


Hvordan lage en enkel telefonnummervælger

Telefonnumre, 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.

For å redusere brukerinngangsfeil og forbedre brukeropplevelsen på nettstedet ditt, kan du opprette en GUI som lar brukere raskt taste inn sitt telefonnummer på en måte som ligner datoplukkere.

I denne veiledningen vil du se hvordan du legger til en enkel telefonnummervaler til et inntastingsfelt . Vi bruker HTML5, CSS3 og JavaScript for å komme til GUI-en som 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 oppretter du et inntastingsfelt med et oppringingsikon til høyre som åpner oppringingsskjermen på klikk. Dial-ikonet ligner bare 9 svarte bokser, arrangert 3 av 3, må likne det du ser på en vanlig telefon.

Jeg bruker tel for riktig HTML5 semantikk, men du kan også bruke text hvis du vil.

2. Lag oppringingsskjermbildet

Dial-skjermen er et rutenett med tall fra 0 til 9 pluss noen spesialtegn. Det kan gjøres med enten en HTML

eller JavaScript.

Her skal jeg vise deg hvordan du oppretter oppringingsbordet i JavaScript. Du kan selvfølgelig legge tabellen direkte i HTML-kildekoden hvis du foretrekker det på den måten.

Først oppretter du et nytt 'table' -element i DOM ved hjelp av createElement() . Gi også den 'dial' identifikatoren.

 / * Lag oppringingsskjerm * / var dial = document.createElement ('table'); dial.id = 'dial'; 

Legg til en for sløyfe for å sette inn de fire radene på oppringtabellen med den. Deretter kjører du for hver rad en annen for sløyfe for å legge til tre celler per rad. Merk hver celle med klassen 'dialDigit' .

 for (var rowNum = 0; rowNum <4; rowNum ++) {var row = dial.insertRow (rowNum); for (var colNum = 0; colNum <3; colNum ++) {varcelle = row.insertCell (colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)). toString (); }} 

De to for løkkene ovenfor beregner sifrene som går inn i cellene på oppringtabellen - verdiene til egenskapen cell.textContent - 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. * / 

Siste rad er forskjellig, som består av to spesialtegn, - og + som brukes i telefonnummerformater for å identifisere regionale koder og sifferet 0 .

Hvis du vil opprette den siste raden til oppringingsskjermen, legger du til følgende if setningen til den indre for sløyfen.

 for (var rowNum = 0; rowNum <4; rowNum ++) {var row = dial.insertRow (rowNum); for (var colNum = 0; colNum <3; colNum ++) {/ * hvis siste rad * / hvis (rowNum === 3) {cell = row.insertCell (colNum); cell.textContent = '-'; cell.className = 'dialDigit'; celle = row.insertCell (colNum); cell.textContent = '0'; cell.className = 'dialDigit'; celle = row.insertCell (colNum); cell.textContent = '+'; cell.className = 'dialDigit'; gå i stykker; } celle = row.insertCell (colNum); cell.className = 'dialDigit'; cell.textContent = ((colNum + 1) + (rowNum * 3)). toString (); }} 

#dialWrapper er nå fullført, legg det til #dialWrapper HTML-beholderen du opprettet i trinn 1 ved å bruke to DOM-metoder :

  1. querySelector() -metoden for å velge beholderen
  2. appendChild() -metoden for å legge til oppringingsskjermen - holdes i dial - til beholderen
 document.querySelector ( '# dialWrapper') appendChild (dial.); 
3. Stil oppringingsskjermen

For å gjøre det mer attraktivt, stil på skjermbildet med CSS.

Du trenger ikke nødvendigvis å holde fast i stylingen min, men ikke glem å legge til user-select:none; eiendom til #dial beholderen slik at mens brukeren klikker på sifrene, vil teksten ikke bli valgt av markøren .

 #dial {width: 200px; høyde: 200px; border-collapse: collapse; tekst-align: center; stilling: relativ; -ms-bruker-velg: ingen; -webkit-bruker-velg: ingen; -moz-user-select: none; brukervalg: ingen; farge: # 000; bokseskygge: 0 0 6px # 999; } .dialDigit {border: 1px solid #fff; markør: pointer; bakgrunnsfarge: rgba (255.228.142, .7); } 
4. Vis oppringingsskjermen på klikk

Først legger du til visibility:hidden; #dial til #dial i ovennevnte CSS for å skjule oppringingsskjermen som standard. Det blir bare vist når brukeren klikker på dial-ikonet.

Deretter legger du til en hendelseshåndterer i klikk på ikonet med JavaScript for å skifte synlighet på oppringingsskjermen.

For å gjøre det, må du bruke de ovennevnte querySelector() og addEventListener() -metodene. Den sistnevnte legger til en klikkhendelse på tallerkenikonet og kaller den egendefinerte toggleDial() -funksjonen.

Funksjonen toggleDial() endrer synligheten på oppringingsskjermen 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

Legg til en egendefinert funksjon som legger inn siffer i telefonnummerfeltet på klikk på cellene på oppringingsskjermen.

Funksjonen dialNumber() legger til tallene en etter en til textContent til inntastingsfeltet merket med #phoneNo identifikatoren.

 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 ('klikk', dialNumber); } 

Nå har du et fungerende oppringingsskjerm for å legge inn telefonnummerfelt.

For å holde tritt med CSS, endre bakgrunnsfargen på sifrene i deres :hover og :active (når brukeren klikker på den) angir.

 .dialDigit: svever {bakgrunnsfarge: rgb (255, 228, 142); } .dialDigit: aktiv {bakgrunnsfarge: # FF6478; } 
6. Legg til regelmessig uttrykksvalidering

Legg til en enkel regex-validering for å validere telefonnummeret mens brukeren skriver inn sifrene i inntastingsfeltet . I henhold til valideringsreglene jeg bruker, kan telefonnummeret bare starte med enten et tall eller et + tegn, og aksepterer - tegnet etterpå.

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 område.

Opprett et nytt Regular Expression-objekt, og lagre det i pattern . Opprett også en egendefinert validate() -funksjon som kontrollerer om det angitte telefonnummeret samsvarer med det vanlige uttrykket, og hvis det er minst 8 tegn langt .

Når inngangen ikke validerer, må validate() -funksjonen gi tilbakemelding til brukeren.

Jeg legger til en rød ramme i inntastingsfeltet når inngangen er ugyldig, men du kan informere brukeren på andre måter, for eksempel med feilmeldinger.

 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 rød'; returner falsk; } else phoneNo.style.border = 'initial'; returnere sant; } 
7. Utfør valideringen

Valideringsfunksjonene validate() må kalles for å kunne utføre valideringen. Ring det fra dialNumber() -funksjonen du opprettet i Trinn 5 for å validere verdien av variabelen phoneNo .

Merk at jeg også lagt til en ekstra validering for maksimale tegn (kan ikke være mer enn 15) ved å bruke en if setning.

 funksjon dialNumber () {var val = phoneNo.value + this.textContent; // maksimale tegn tillatt, 15 hvis (val.length> 15) returnerer false; validere (Val); phoneNo.value = val; } 

Telefonnummerplukkeren din er nå klar, sjekk ut den endelige demoen nedenfor.

Hvordan overleve et feil karrierevalg

Hvordan overleve et feil karrierevalg

"Stakk i en feil jobb?" Eller "tok du feil vende på karrieren din?" Er de slags ideer de fleste jobbsøkende nettsteder bygger sin salgsstrategi på. På samme måte er karriereblogger og HR-tidsskrifter også fulle av skriving på samme tema.Dette er faktisk en veldig effektiv taktikk som appellerer til hundrevis av ansatte som tror at de kanskje har gjort et falsk trekk i å plukke ut nåværende karriere. Overbevi

(Tekniske og design tips)

Twitter's Moments-funksjonen er nå tilgjengelig på iOS og Android

Twitter's Moments-funksjonen er nå tilgjengelig på iOS og Android

Tilbake i september introduserte Twitter en funksjon som heter Moments, slik at brukerne kan skreddersy historier ved hjelp av tweets og bilder. Tidligere kunne brukerne bare lage øyeblikk på nettversjonen av Twitter, men det er i gårsdagens nyheter. Fra og med i dag kan brukerne opprette øyeblikk fra Twitters iOS- eller Android-app.For

(Tekniske og design tips)