Finger-vänliga numeriska ingångar med ” inputmode`

0
38

Formerna är ofta en mardröm på mobilen. Vi kan göra processen så smärtfri som möjligt genom att reagera på sammanhang. Inmatningsfält som räknar med numeriska värden bör ha en numerisk UI. Att ta upp ett antal tangentbord på små skärmar är lätt på de flesta plattformar — bara använda en <input type=”number”>.

Den här stora knappen för numeriska tangentbordet är finger-vänliga och kommer att hjälpa till att förhindra att användare som studsar från din form i frustration. Dock type=”number” är inte lämpliga för alla nummer.

På (de flesta) större skärmar, antalet ingångar komma med en incrementer/decrementer-knappen. Det finns en bra bit av UI, vi får gratis som standard. Det gör dock att denna typ av input-helt olämpligt för en kreditkortsnummer, till exempel.

Standard UI om nummer ingångar ser ut ungefär så här i alla webbläsare desktop

Spec själv gör detta tydligt.

Typ=antalet tillstånd är inte lämpliga för in-det händer att bara bestå av siffror, men är det inte i strikt bemärkelse är ett nummer. Till exempel, det skulle vara olämpligt för kredit kort tal eller OSS postnummer. Ett enkelt sätt att avgöra om att använda type=antalet är att överväga om det skulle vara meningsfullt för kontroll av att ha en nummerruta gränssnitt (exempelvis, med “upp” och “down” pilarna). Att få ett kreditkort antalet fel genom att 1 i den sista siffran är inte ett litet misstag, men det är lika fel som att få varje siffra fel. Så skulle det inte meningsfullt för användaren att välja ett kreditkortsnummer för att använda “upp” och “ner” knapparna. När en nummerruta gränssnittet är inte lämpligt, type=text är nog rätt val (möjligen med ett mönster attribut).

Det är lätt att dölja knapparna upp och ned med CSS:

input[type=”number”] {
-moz-utseende: textfield;
}
input[type=”number”]::-webkit-inre-spin-knappen,
input[type=”number”]::-webkit-yttre-spin-knappen {
-webkit-utseende: none;
margin: 0;
}

Det är viktigt att notera att detta inte är den enda skillnaden mellan en rad och textinmatning. Du bör definitivt följa spec på denna punkt! Vissa äldre webbläsare tar bort inledande nollor för antalet ingångar som skulle vara ett stort problem för OSS POSTNUMMER. En ofta användbar maxlength ignoreras om nummer ingångar.

ja ja ja! <input type=number> slutligen dör den brinnande död den förtjänar!

— Monica Dinculescu (@notwaldorf) 13 Mars 2018

Varför skulle någon ogillar en så bra ingång?

Svaret kommer ner till validering och med ingång för fel sak. Antalet input utför ingång sanering som standard. Om en användare skriver något som inte är ett giltigt tal, värdet kommer att vara lika med en tom sträng — oavsett vad användaren ser på skärmen.

Denna ingång sanering kan resa utvecklare upp, och det finns inget sätt att stänga av det. Om du vill tillåta input som inte är ett giltigt tal, inte använda type=”number”.

Nummer in i Chrome. Detta kan vara giltigt underlag för din användning fallet, men det är olagligt i ögonen av antalet ingång.

var numberinput = dokument.querySelector (“input[type=”number”]’)
numberinput.värde // kommer att vara “”

Detta är kanske inte vad du skulle intuitivt förväntar sig. Men om du följer spec och bara använda nummer ingång för vad dess avsedda för faktiska siffror — detta beteende är oproblematiskt.

Antalet Alternativ Ingång

iOS Lösning: Använd den “mönster” – Attribut på ett textinmatningsfält

På iOS-enheter med hjälp av mönster attribut med ett värde av [0-9]* kommer att ta upp den numeriska knappsatsen. Detta fungerar endast med denna exakta mönster — du kan inte låta någon extra tecken.

<label for=”kreditkort”>kreditkortsnummer:</label> <input mönster=”[0-9]*” type=”text” name=”kreditkort”>

iOS med mönster attribut

Tänk på att en iPhone inte kommer att låta användaren växla tangentbord när detta tangentbord visas. Se till att dessa är de enda tangenter som de behöver för att fylla i den in på rätt sätt.

Om du vill sätta upp en knappsats med stora numeriska tangenterna på iOS, du behöver för att använda mönster attribut även om nummer ingångar. Annars, du kommer att få små-och finger-vänliga knappar:

iOS knappsatsen för <input type=”number”>

En Bättre Lösning: `inputmode`

inputmode har varit en WHATWG spec för ett par år, och har slutligen genomförts av Chrome version 66:

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 Inga 20 Inga Inga Inga

Mobil / Surfplatta

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
Inga Inga Inga Inga Inga Inga

För bredast möjliga stöd, det kan kombineras med det mönster som attribut för iOS:

<label for=”kreditkort”>kreditkortsnummer:</label> <input inputmode=”numeriska” pattern=”[0-9]*” type=”text” name=”kreditkort”>

Detta ger utvecklare full kontroll över den mobila ANVÄNDARGRÄNSSNITTET utan någon extra bagage. Det gör UI finger-vänliga samtidigt som den är mer mångsidig än de mönster attribut som vi kan ge alla tecken som vi tycker om. Det styr en sak och en sak endast. inputmode är en bra lösning för de fall när det är olämpligt att använda type=”number”.

Vissa människor skulle gå vidare och dike type=”number” helt och hållet en gång inputmode har bättre stöd. Jag är inte övertygad om att det är klokt, men type=”number” kan vara problematiskt.

om (numberInput.giltighet.valueMissing) {
errorMessage.textContent = “fältet får inte vara tomt”
}

I motsats till det mänskliga ögat, fältet är tomt…

Om du vill uttryckligen varna för tomma antalet ingångar, måste du använda:

om (numberInput.giltighet.valueMissing && !numberInput.giltighet.badInput) {
errorMessage.textContent = “fältet får inte vara tomt”
}

Enligt Google användarna överge inköp två gånger så ofta på mobilen jämfört med desktop. Omsättning på mobiltelefoner endast står för en tredjedel av alla genomförda inköp online. Klart att folk inte tål famlande genom dåligt utformade formulär och viftade på små ingångar. Inmatning av Data måste vara enkel. Medan webbläsare är för närvarande låg, vi är egentligen bara väntar på mobila webbläsare. Desktop support är irrelevant. Input-element som introducerades av HTML5 är bra, men de saknar vissa fall kanten. Detta kan fylla i lite luckor.