Begrensning av inngang med JQuery

Hvis det er en ting som driver meg sint på nettet, er det når innskrivingsskjema tillater meg å skrive inn feil data, bare for å påpeke feilen etter at jeg har prøvd å sende inn den. Det ser ut til at halvparten av skjemaene jeg sender inn, må fylles på og innsendes på nytt fordi jeg ikke har lagt inn en stor bokstav i passordet mitt, eller jeg gjorde det, eller passordet kan bare være numerisk eller et annet krav som ingen trodde å nevne.

Slik hjernen fungerer, ser vi etter løsninger basert på verktøyene foran oss. Du skriver ikke inn store bokstaver på minibanken gjør du? Nei, fordi ATM-tastaturet bare har tall. Du kan ved en feiltakt slå feil nummer, men du har aldri prøvd å skrive inn din e-postadresse eller din mors pikenavn.

Deri ligger problemet, tastaturet du bruker kompliserer innlasting av data på nettet. Det har sannsynligvis mellom 75 og 100 taster, og enda flere tegn er lett tilgjengelige ved å holde multi-tastekombinasjoner. Bruk den til å logge inn på Facebook, er som å poppe ut for melk i en Ferrari.

Selvfølgelig må tastaturet ha flere innspillingsalternativer enn et bestemt skjemafelt krever, fordi det er et multi-bruk verktøy; Du kan ikke praktisk talt ha et annet tastatur for hver mulig type inngang.

Dette fører til et alvorlig bruksproblem: Brukerne blir stadig bedt om å "rette" deres informasjon slik at de passer til et skjema. Det er en fin måte å øke frustrasjonen og miste virksomhet på.

Touchscreen-enheter har gjort store fremskritt i dette området ved å endre skjermtastaturet for å skreddersy hvilke typer innspill som er mulig, til de nødvendige dataene; Skriv inn en e-postadresse på en iPhone for eksempel, og du vil ikke kunne taste inn et mellomrom ved en feil, fordi mellomromstasten ikke er oppgitt.

Digitalt tastaturbilde via Shutterstock

Inntil vi alle jobber med berøringsskjermer, trenger vi en midlertidig løsning, og det er faktisk ganske enkelt: ved hjelp av jQuery kan vi slippe et lag av intelligens mellom tastaturet og inngangsfeltet og bare godta dataene dersom det faller innenfor forventede grenser , ignorerer noe utenfor disse grensene, trygg på at det er en feil.

Først må vi sette opp et inputfelt i HTML som vi vil begrense, et telefonnummer for eksempel:

Phone:

Så, i dokumentets hode, må vi importere jQuery:

Og umiddelbart etterpå legger du til følgende skript:

Dette skriptet kjøres når dokumentet er klart, ved å legge til en tastetrykksmetode i feltet. Vi oppdager deretter hvilken tast som er trykket basert på charCode- egenskapen - tallet 0 er tildelt koden 48, 1 er 49 og så videre. En hvilken som helst tast som ligger utenfor vårt område, skal returnere falsk. Hvis metoden returnerer, vil nettleseren ganske enkelt ignorere tastetrykket.

Dette betyr at hvis brukeren treffer en hvilken som helst nøkkel som ikke er 0-9, vil inngangen bli ignorert, effektivt begrense inngangen til tall.

Vi kan bruke samme teknikk til nesten hvilket som helst felt, bygge opp komplekse regler ved hjelp av logisk AND og logisk ELLER. Hvis vi for eksempel vil begrense innspillet til etternavn, må vi begrense innspill til små bokstaver (97-122), store bokstaver (65 - 90) og sporadisk bindestrek (45):

$('.surnameInput').keypress(function(key) {if((key.charCode < 97 || key.charCode > 122) && (key.charCode < 65 || key.charCode > 90) && (key.charCode != 45)) return false;});

Du kan prøv en demo her .

Denne koden er en progressiv forbedring. Det vil ta litt av belastningen av servervalideringen din, men det betyr ikke at du heller ikke bør validere informasjonen du samler.

Forebygging, som sagt sier, er bedre enn kur; og ved hjelp av dette tipset ser du en reduksjon i antall personer som starter, men ikke fyll ut skjemaene dine, spesielt når komplekse datakrav er involvert.

Gjør brukerne regelmessig feil på skjemaene dine? Hvordan håndterer du feilene? Gi oss beskjed i kommentarene.

Utvalgt bilde / miniatyrbilde: tastaturbilde via Shutterstock