Alt Du Noensinne Ønsket å Vite Om inputmode

0
13

Den inputmode global attributt som gir et hint til nettlesere for enheter med skjermen, tastatur for å hjelpe dem med å bestemme hvilke tastaturet for å vise når en bruker har valgt noen innspill eller textarea element.

<input type=”text” inputmode=”” />
<textarea inputmode=”” />

I motsetning til endring av type form, inputmode ikke endre hvordan nettleseren tolker input — det gir leseren som tastaturet for å vise.

Den inputmode attributt har en lang historie, men har bare nylig blitt vedtatt av de to store mobile nettlesere: Safari for iOS og Chrome for Android. Før det, det ble implementert i Firefox for Android vei tilbake i 2012, og deretter fjernet flere måneder senere (selv om det fortsatt er tilgjengelig via et flagg).

Nesten seks år senere, Chrome for Android implementert funksjon — og med den siste versjonen av iOS 12.2, Safari støtter nå er det også.

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 53 20 Ingen 75 Ingen

Mobil / Nettbrett

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
12.2 Ingen Ingen 67 74 Ingen

Men før vi går dypt inn ins og outs av attributtet, tenk at WHATWG levende standard gir inputmode dokumentasjon mens W3C 5.2 spec ikke lenger viser den i dens innhold, som antyder at de anser det som foreldet. Gitt at WHATWG har dokumentert det og nettlesere har jobbet mot å støtte det, vi kommer til å gå anta WHATWG spesifikasjoner er standard.

inputmode aksepterer en rekke verdier. La oss gå gjennom dem, en etter en.

Ingen

<input type=”text” inputmode=”ingen” />

Vi starter her fordi det er meget mulig vi ikke ønsker noen form av tastaturet på en inngang. Ved hjelp av inputmode=ingen vil ikke vise et tastatur til alle på Chrome for Android. iOS 12.2 vil fortsatt vise sin standard alfanumeriske tastaturet, slik angir ingen kan være i form av en reset for iOS i den forbindelse. Uansett, det er ingen som er beregnet for innhold som gjør sin egen tastatur kontroll.

Numerisk

<input type=”text” inputmode=”numerisk” />

Dette er trolig en av de mer vanlige inputmode verdier ut i naturen fordi det er ideelt for innganger som krever tall, men ingen bokstaver — ting som PIN-kode, zip-koder, kredittkortnummer, etc. Ved hjelp av det numeriske verdien med en input type=”text” kan faktisk være mer fornuftig enn å sette input type=”antall” alene fordi, i motsetning til en numerisk inngang, inputmode=”tall” kan brukes med maxlength, minlength og mønster egenskaper, noe som gjør det mer allsidig for ulike bruksmåter.

Den numeriske verdien på Chrome for Android (til venstre) og iOS 12.2 (høyre)

Jeg har ofte sett på nettsteder som bruker type=tel på en inngang til å vise en numerisk tastatur, og som ser ut som en midlertidig løsning, men er ikke semantisk korrekt. Hvis det bums deg ut, må du huske at inputmode støtter mønstre, kan vi legge til mønster=”d*” til inngang for samme effekt. Som sagt, bare bruk dette hvis du er sikker på innspill bør bare tillate numeriske inngang fordi Android (i motsetning til iOS) tillater ikke brukeren å endre tastatur du kan bruke bokstaver, som kan utilsiktet hindre brukere fra å sende gyldige data.

Tlf

<input type=”text” inputmode=”tlf” />

Å skrive inn et telefonnummer ved hjelp av en standard alfanumeriske tastaturet kan være en smerte. For ett, hvert nummer på en telefon-tastatur (med unntak av 1 og 0) representerer tre bokstaver (f.eks. 2 representerer A, B og C) som er vist med nummeret. Det alfanumeriske tastaturet ikke henvisning disse bokstavene, så dekoding et telefon nummer som inneholder bokstaver (f.eks. 1-800-SAMLE) tar mer mental kraft.

Tel verdi på Chrome for Android (til venstre) og iOS 12.2 (høyre)

Ved hjelp av inputmode satt til tel vil produsere en standard som ser telefon tastaturet, inkludert tastene for tallene 0 til 9, firkanttasten (#) karakter, og stjernen (*) tegnet. Pluss, vi får de alfabetiske mnemonic etiketter (for eksempel ABC).

Desimal

<input type=”text” inputmode=”decimal” />

Den desimal verdi på Chrome for Android (til venstre) og iOS 12.2 (høyre)

En inputmode satt til desimal verdi resulterer i en subtil endring i iOS der tastaturet ser ut til å være nøyaktig det samme som tel verdi, men erstatter + * # – tasten med en enkel desimal (.). På den annen side, dette har ingen effekt på Android, som vil rett og slett bruke det numeriske tastaturet.

E-post

<input type=”text” inputmode=”e-postadresse” />

Jeg er sikker på at du (og i det minste noen du kjenner), har fylt ut et skjema som ber om en e-postadresse, bare for å gjøre deg bytte tastatur for å få tilgang @ – tegnet. Det er ikke livstruende eller noe, men absolutt ikke en god brukeropplevelse.

Det er der e-verdien kommer i. Det bringer @ – tegnet inn i kampen, samt desimal (.) karakter.

E-verdi på Chrome for Android (til venstre) og iOS 12.2 (høyre)

Dette kan også være en nyttig tastaturet for å vise brukere som trenger å oppgi brukernavn, gitt at@ er en sentral karakter for å identifisere brukere. Imidlertid, e-postadresse forslag som iOS-skjermen over tastaturet, kan føre til forvirring.

Et annet eksempel på bruk kan være hvis du har din egen e-post validering script og ikke ønsker å bruke nettlesere som er innebygd i e-validering.

URL

<input type=”text” inputmode=”url” />

Url-verdi på Chrome for Android (til venstre) og iOS 12.2 (høyre)

Url-verdi gir en nyttig snarvei for brukere å legge Toppdomener (f.eks .com-eller .co.norge) med én nøkkel, som vel tastene som vanligvis brukes i web-adresser, som prikk (.) og skråstrek (/) tegn. Den eksakte TLD som vises på tastaturet, er knyttet til brukerens nasjonale innstillinger.

Dette kan også være en nyttig tastaturet for å vise brukere hvis dine innspill aksepterer domenenavn (f.eks. css-tricks.com) samt full Uri (f.eks. https://css-tricks.com). Bruker type=”url-adresse” i stedet hvis dine innspill krever validering av input.

Søk

<input type=”text” inputmode=”søk” />

Søk verdi på Chrome for Android (til venstre) og iOS 12.2 (høyre)

Dette viser en blå Gå tasten på iOS og en grønn Enter-tasten på Android, begge i stedet for der kommer Tilbake. Som du kanskje har gjettet med den verdien som er navnet, søk er nyttig for søk former, forutsatt at innlevering-tasten for å lage en spørring.

Hvis du ønsker å showSearch i stedet for å gå Inn på iOS og et forstørrelsesglass-ikonet på Android i stedet for den grønne pilen, bruker type=søk i stedet.

Andre ting du oughta know

  • Krom-baserte nettlesere på Android — for eksempel Microsoft Kanten, Modig og Opera — dele samme inputmode atferd som Chrome.
  • Jeg har ikke inkludert detaljer av tastatur på iPad på grunn av kortfattethet. Det er stort sett den samme som iPhone, men inneholder flere nøkler. Samme er sant for Android-nettbrett, lagre for tredjeparts-tastatur, som kan være et annet tema verdt dekker.
  • Den opprinnelige foreslåtte spec hadde verdier kana og katakana for Japansk inngang, men de ble aldri gjennomført av en hvilken som helst nettleser, og har siden blitt fjernet fra spec.
  • latin-navnet var også en av verdien av den opprinnelige spec og har siden blitt fjernet. Det er interessant, hvis det brukes nå på Safari for iOS, det vil vise navnet på brukeren som et forslag over tastaturet.

    Latin-navn verdi viser navnet mitt som en auto-fyll forslag

Demo

Oh, du ønsker å se hvordan alle disse inngangsmodus arbeidet for deg selv? Her er en demo som du kan bruke på en enhet med berøringsskjerm, tastatur for å se forskjellene.

Referanser

  • WHATWG spesifikasjon
  • MDN dokumentasjon
  • Caniuse
  • Chrome-Plattform-Status (Krom Billett #244688)