Allt Du Någonsin Velat Veta Om inputmode

0
50

Den inputmode globala attribut ger en ledtråd till webbläsare för enheter med tangentbord på skärmen för att hjälpa dem att besluta vilka tangentbord som ska visas när användaren har valt någon ingång eller textarea element.

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

Till skillnad från att ändra typ av form, inputmode inte ändra sättet som webbläsaren tolkar input — det instruerar webbläsaren som tangentbordet för att visa.

Den inputmode attribut har en lång historia, men har bara helt nyligen antagits av de två stora mobila webbläsare: Safari för iOS och google Chrome för Android. Innan det var det genomföras i Firefox för Android sätt tillbaka 2012, och därefter tas bort flera månader senare (även om det fortfarande är tillgänglig via en flagga).

Nästan sex år senare, Chrome för Android genomfört har — och med den senaste versionen av iOS 12.2, Safari har nu stöd för det också.

Denna webbläsare har stöd för data är från Caniuse, som har mer i detalj. En rad anger att webbläsaren stöder den funktionen på denna version och upp.

Skrivbordet

ChromeOperaFirefoxIEEdgeSafari
66 53 20 Inga 75 Inga

Mobil / Surfplatta

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

Men innan vi går djupt in ins och outs av attribut, anser att WHATWG levnadsstandard ger inputmode dokumentation, medan W3C 5.2 spec inte längre innehåller den i dess innehåll, vilket tyder på att de anser att det är föråldrat. Med tanke på att WHATWG har dokumenterat den och webbläsare har arbetat mot att stödja det, att vi skulle gå och ta WHATWG specifikationer som är standard.

inputmode accepterar ett antal värden. Låt oss gå igenom dem, en efter en.

Ingen

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

Vi börjar här, eftersom det är mycket möjligt att vi inte vill ha någon typ av tangentbord på en ingång. Med hjälp av inputmode=ingen kommer inte att visa ett tangentbord på alla sätt, Chrome för Android. iOS 12.2 kommer fortfarande att visa sin standard alfanumeriska tangentbordet, så att ange att ingen kunde vara i form av en reset för iOS i detta avseende. Oavsett, ingen är avsedd för innehåll som gör sina egna tangentbord kontroll.

Numeriska

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

Detta är förmodligen en av de vanligaste inputmode värden ute i naturen eftersom den är idealisk för ingångar som kräver siffror men inga bokstäver — saker som PIN-post, postnummer, kreditkort nummer, etc. Med hjälp av det numeriska värdet med en input type=”text” kan faktiskt göra mer känsla än att ha ställt in att”type= “number” på egen hand eftersom den, till skillnad från en numerisk inmatning, inputmode=”numeriska” kan användas med maxlength, minlength och mönster attribut, vilket gör den mer mångsidig för olika användningsfall.

Det numeriska värdet på Chrome för Android (till vänster) och iOS 12.2 (höger)

Jag har ofta sett webbplatser som använder typ=tel på en ingång för att visa ett numeriskt tangentbord, och som ser ut som en tillfällig lösning, men är inte semantiskt korrekt. Om det bums ut dig, kom ihåg att inputmode stöder mönster, kan vi lägga till mönster=”d*” till ingången för samma effekt. Som sagt, använd bara om du är säker på att indata bör endast tillåta numerisk inmatning, eftersom Android (till skillnad från iOS) inte tillåter användaren att byta till tangentbordet för att använda bokstäver, som kan oavsiktligt hindra användare från att skicka in giltiga data.

Tel

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

Mata in ett telefonnummer med hjälp av en standard alfanumeriska tangentbordet kan vara en smärta. För en, varje nummer på en telefon med tangentbord (utom 1 och 0) representerar tre bokstäver (t ex 2 representerar A, B och C) som visas med nummer. Det alfanumeriska tangentbordet refererar inte dessa bokstäver, så avkodning ett telefonnummer med bokstäver (t ex 1-800-SAMLA) tar mer mental kraft.

Tel värde på Chrome för Android (till vänster) och iOS 12.2 (höger)

Med hjälp av inputmode inställd på tel kommer fram en standard-ser telefon tangentbordet, inklusive nycklar för siffrorna 0 till 9, pund (#) karaktär, och asterisk ( * ). Plus att vi får de alfabetiska mnemonic etiketter (t ex ABC).

Decimal

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

Det decimala värdet på Chrome för Android (till vänster) och iOS 12.2 (höger)

En inputmode ställa till det decimala värdet resulterar i en subtil förändring i iOS där tangentbordet verkar vara exakt samma som tel värde, men ersätter + * # – knappen med en enkel decimal (.). På den andra sidan, har detta ingen effekt på Android, vilket kommer helt enkelt att använda det numeriska tangentbordet.

E-post

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

Jag är säker på att du (och åtminstone någon du känner) har fyllt i ett formulär som frågar efter en e-postadress, bara för att få dig att byta tangentbord för att få tillgång tecknet@. Det är inte livshotande eller något, men absolut inte en bra användarupplevelse heller.

Det är där e-post värde kommer in. Det ger tecknet @ i striden, liksom decimal (.) karaktär.

E-värde på Chrome för Android (till vänster) och iOS 12.2 (höger)

Detta kan också vara ett användbart tangentbordet för att visa att användarna måste ange ett användarnamn, med tanke på att@ är en central karaktär för att identifiera användare. Men den e-postadress förslag som iOS displayen ovanför tangentbordet kan orsaka förvirring.

En annan användning fallet skulle kunna vara om du har en egen e-validering manus och inte vill använda webbläsare inbyggd e-validering.

URL

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

Url-värdet på Chrome för Android (till vänster) och iOS 12.2 (höger)

Url-värdet ger en praktisk genväg för användare att lägga till Toppdomäner (t ex .kom eller .co.storbritannien) med en enda knapp, samt knappar som normalt används i web-adresser, som är den punkt (.) och snedstreck (/) tecken. Den exakta TLD visas på tangentbordet är kopplade till användarens språk.

Detta kan också vara ett användbart tangentbordet för att visa användarna om din ingång accepterar domännamn (t ex css-tricks.com) samt full Uri (t ex https://css-tricks.com). Använda type=”url” i stället om din ingång kräver validering av indata.

Sök

<input type=”text” inputmode=”sökning” />

Sök värde på Chrome för Android (till vänster) och iOS 12.2 (höger)

Detta visar en blå Go nyckel för iOS och en grön Enter-tangenten på Android, både i stället för där Avkastningen. Som du kanske har gissat av värde namn, sökning är användbar för att söka former, vilket ger att lämna nyckeln till att göra en förfrågan.

Om du vill showSearch istället för att gå In på iOS och ett förstoringsglas som ikon om Android i stället för den gröna pilen för att använda type=search istället.

Andra saker du vet oughta

  • Krom-webbläsare för Android — som Microsoft Kanten, Modiga och Opera — dela samma inputmode beteende som Chrome.
  • Jag har inte tagit med detaljer av tangentbord på iPad för enkelhetens skull. Det är mestadels samma som för iPhone, men har fler nycklar. Samma är sant för Android tabletter, med undantag för tredje-parts tangentbord, vilket kan vara ett annat ämne värt täcker.
  • Den ursprungliga föreslagna spec hade de värden som kana och katakana för Japanska ingång, men de var aldrig genomföras av alla webbläsare och har sedan dess tagits bort från spec.
  • det latinska namnet var också ett av de värden av den ursprungliga spec och har sedan dess tagits bort. Intressant, om det används nu på Safari för iOS, det kommer att visa användarens namn som ett förslag ovanför tangentbordet.

    Latin-namn-värdet visar mitt namn som ett auto-fill förslag

Demo

Åh, du vill se hur alla dessa input lägen arbeta för dig själv? Här är en demo som du kan använda på en enhet med pekskärm tangentbord för att se skillnaderna.

Referenser

  • WHATWG specifikation
  • MDN dokumentation
  • Caniuse
  • Chrome Plattform Status (Krom Biljett #244688)