Finger-vennlig numeriske innganger med `inputmode`

0
37

Formene er ofte et mareritt på mobil. Vi kan gjøre prosessen så smertefri som mulig ved å reagere slik sammenheng. Feltene som forventer numeriske verdier bør ha en numerisk UI. Å bringe opp et antall tastatur på små skjermer er lett på de fleste plattformer — det er bare å bruke en <input type=”antall”>.

Denne store knappen numeriske tastaturet er finger-vennlig, og vil bidra til å hindre at brukere går fra skjemaet i frustrasjon. Imidlertid, type=”antall” er ikke hensiktsmessig for alle tall.

På (de fleste) større skjermer, antall innganger kommer med en incrementer/decrementer-knappen. Det er en nyttig del av UI, vi får gratis ved standard. Det gjør imidlertid denne typen input helt upassende for en kreditt kort nummer, for eksempel.

Standard UI for antall innganger ser noe som dette i alle datamaskiner

Spec seg selv gjør dette klart.

Den type=antall staten er ikke egnet for innspill som skjer til å bare bestå av tall, men er ikke strengt tatt et nummer. For eksempel, det ville være upassende for kreditt kort nummer eller US postal-koder. En enkel måte å bestemme om du vil bruke type=antall er å vurdere om det ville være fornuftig for innspill kontroll for å få en spinbox grensesnitt (f.eks., med “opp” og “ned” piltasten). Å få en kreditt kort nummer galt med 1 i det siste sifferet er ikke en liten feil, det er like feil som å få hver siffer feil. Så det ville ikke gi mening for brukeren å velge et kredittkort-nummer ved hjelp av “opp” og “ned” knappene. Når en spinbox grensesnittet er ikke aktuelt, type=tekst er kanskje det rette valget (muligens med et mønster attributt).

Det er lett å skjule knappene opp og ned med CSS:

input[type=”antall”] {
-moz-utseende: textfield;
}
input[type=”antall”]::-webkit-indre-spinn-knappen,
input[type=”antall”]::-webkit-ytre-spinn-knappen {
-webkit-utseende: ingen;
margin: 0;
}

Det er viktig å merke seg at dette ikke er den eneste forskjellen mellom et tall og skriving. Du bør definitivt følge spec på dette punktet! Noen eldre nettlesere vil kle seg ut innledende nuller for antall innganger som ville være et stort problem for OSS ZIP-koder. Ofte nyttig maxlength attributtet er ignorert på antall innganger.

ja ja ja! <input type=antall> kan til slutt dør den brennende død den fortjener!

— Monica Dinculescu (@notwaldorf) 13 Mars 2018

Hvorfor skulle noen misliker slike nyttige innspill?

Svaret kommer ned til validering og med inngang for feil ting. Antall input utfører inngang sanering av standard. Hvis en bruker går inn i noe som ikke er et gyldig nummer, verdien vil være lik en tom streng — uavhengig av hva brukeren kan se på skjermen.

Denne inngangen sanering kan reise utviklere opp, og det er ingen måte å slå den av. Hvis du ønsker å tillate input som ikke er et gyldig nummer, ikke bruker type=”antall”.

Antall innspill i Chrome. Dette kan være gyldig inngang for din bruk tilfelle, men det er illegitimt i øynene av antall inngang.

var numberinput = – dokument.querySelector(‘input[type=”antall”]’)
numberinput.verdi // vil bli “”

Dette er kanskje ikke det du ville intuitivt forventer. Imidlertid, hvis du følger spec og bare bruke nummeret inngang for hva den er laget for, faktiske tall — dette er helt uproblematisk.

Antall Input Alternativer

iOS Løsning: Bruk “mønster” – Attributtet på en ordbok

På iOS-enheter, ved hjelp av mønsteret attributt med en verdi på [0-9]* du vil få opp det numeriske tastaturet. Dette fungerer bare med akkurat dette mønsteret — du kan ikke tillate noen ekstra tegn.

<label for=”kredittkort”>kreditt kort nummer:</label> <input mønster=”[0-9]*” type=”text” name=”kredittkort”>

iOS med mønster attributt

Husk at en iPhone vil ikke la brukeren slå tastaturet type når tastaturet vises. Sørg for at disse er de eneste tastene de trenger for å fylle ut riktig inngang.

Hvis du ønsker å ta opp et tastatur med store numeriske tastene på iOS, må du bruke mønsteret attributt selv om antall innganger. Ellers, vil du få små og finger-vennlig knapper:

iOS tastaturet for <input type=”antall”>

En Bedre Løsning: `inputmode`

inputmode har vært en WHATWG spec for et par år, og har endelig blitt implementert av Chrome som av versjon 66:

Denne nettleseren støtter data er fra Caniuse, som har mer detalj. Angir et nummer som nettleseren støtter funksjonen på denne versjonen, og opp.

Skrivebordet

ChromeOperaFirefoxIEEdgeSafari
66 Ingen 20 Ingen Ingen Ingen

Mobil / Nettbrett

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
Ingen Ingen Ingen Ingen Ingen Ingen

For bredest mulig støtte, det kan være kombinert med mønster attributtet for iOS:

<label for=”kredittkort”>kreditt kort nummer:</label> <input inputmode=”numerisk” pattern=”[0-9]*” type=”text” name=”kredittkort”>

Dette gir utviklere full kontroll over det mobile UI uten noen ekstra bagasje. Det gjør UI finger-vennlig, samtidig som den er mer allsidig enn mønsteret attributt som vi kan tillate noen tegn vi liker. Det styrer en ting og en ting bare. inputmode er en flott løsning for de tilfeller da det er upassende å bruke type=”antall”.

Noen mennesker vil gå lenger og droppe type=”antall” totalt når inputmode har bedre støtte. Jeg er ikke overbevist om at det er lurt, men type=”tall” kan være problematisk.

hvis (numberInput.gyldighet.valueMissing) {
errorMessage.textContent = “feltet må ikke være tomt”
}

I motsetning til det menneskelige øyet, feltet er tomt…

Hvis du ønsker å eksplisitt advare av tom antall innganger, du trenger å bruke:

hvis (numberInput.gyldighet.valueMissing && !numberInput.gyldighet.badInput) {
errorMessage.textContent = “feltet må ikke være tomt”
}

Ifølge Google, vil brukere forlate kjøp dobbelt så ofte på mobile i forhold til skrivebordet. Salg på telefoner står for kun en tredjedel av alle fullførte online kjøp. Klart folk ikke tåler å fomle gjennom dårlig utformet former og jabbing på små signaler. Innlegging av Data trenger å bli uanstrengt. Mens nettleser støtte er for tiden lav, vi er egentlig bare venter på mobile nettlesere. Desktop-støtte er i stor grad irrelevant. Input elementer introdusert av HTML5 er gode, men de går glipp av noen kant tilfeller. Dette kan fylle i noen hull.