Vinger-vriendelijke numerieke ingangen met `inputmode`

0
34

Formulieren zijn vaak een nachtmerrie op mobiel. We kunnen het proces als de pijn-vrij als mogelijk door te reageren op de context. Velden die verwachten dat de numerieke waarden moet een numerieke UI. Het opvoeden van een aantal toetsenbord op kleine schermen is gemakkelijk op de meeste platformen — gewoon gebruik maken van een <input type=”aantal”>.

Deze grote knop numeriek toetsenbord is vinger-vriendelijk en zal u helpen voorkomen dat gebruikers stuiteren van uw formulier in frustratie. Echter, type=”number” is niet geschikt voor alle nummers.

Op (veel) grotere schermen, het aantal ingangen zijn voorzien van een incrementer/decrementer knop. Het is een handig stukje UI krijgen we gratis standaard. Het is, echter, dit soort invoer totaal ongepast voor een credit card nummer, bijvoorbeeld.

De standaard GEBRUIKERSINTERFACE voor het aantal ingangen er als volgt uitziet in alle browsers

De spec zelf maakt dit duidelijk.

Het type=aantal staat is niet geschikt voor de ingang dat gebeurt alleen bestaan uit cijfers, maar is niet strikt genomen een aantal. Bijvoorbeeld, het zou ongepast zijn voor een credit card nummers of US postal codes. Een eenvoudige manier om te bepalen of het te gebruiken type=aantal is te overwegen of het zinvol zijn voor het invoerbesturingselement om een spinveld interface (bijv. met “omhoog” en “omlaag” pijlen). Het krijgen van een creditcard aantal fout 1 in het laatste cijfer is niet een kleine vergissing, het is zo fout als het krijgen van elk cijfer onjuist. Dus het zou niet zinvol zijn voor de gebruiker in staat om een credit card nummer met behulp van de “up” en “down” knoppen. Wanneer een spinveld interface is niet van toepassing, type= “text” is waarschijnlijk de juiste keuze (eventueel met een patroon attribuut).

Het is gemakkelijk om te verbergen van de up-en down-toetsen met CSS:

input[type=”number”] {
-moz-uiterlijk: textfield;
}
input[type=”number”]::-webkit-innerlijke-spin-knop,
input[type=”number”]::-webkit-outer-spin-knop {
-webkit-uiterlijk: none;
margin: 0;
}

Het is belangrijk op te merken dat dit niet het enige verschil tussen een nummer en tekstinvoer. Moet je zeker volgen de specificaties op dit punt! Sommige oudere browsers zullen strip uit nullen voor het aantal ingangen dat zou een groot probleem voor de AMERIKAANSE ZIP-codes. De vaak nuttig maxlength attribuut wordt genegeerd op het aantal ingangen.

ja ja ja! <input type=number> kan uiteindelijk sterven de vurige dood die het verdient!

— Monica Dinculescu (@notwaldorf) Maart 13, 2018

Waarom zou iemand een hekel aan zulk een nuttige bijdrage?

Het antwoord komt neer op de validatie en het gebruik van de input voor de verkeerde dingen. Het aantal input voert ingang sanering standaard. Als een gebruiker iets dat is geen geldig getal, de waarde zal gelijk zijn aan een lege string — ongeacht wat de gebruiker kan zien op het scherm.

Deze input sanering kan reis ontwikkelaars, en er is geen manier om het uit te zetten. Als u wilt toestaan dat input is geen geldig getal niet gebruiken type=”number”.

Aantal input in Chrome. Dit kan worden geldige invoer voor uw gebruik zaak, maar het is onwettig in de ogen van het aantal input.

var numberinput = document.querySelector(‘input[type=”number”]’)
numberinput.waarde //””

Dit is misschien niet wat je intuïtief zou verwachten. Echter, als je de spec en gebruik alleen het aantal input voor wat het is ontworpen voor de werkelijke aantallen — dit gedrag is problematisch.

Aantal Input Alternatieven

iOS Oplossing: Gebruik de `patroon` Attribuut op een Tekst Invoer

Op iOS-apparaten, met behulp van het patroon kenmerk met een waarde van [0-9]* om het numerieke toetsenblok. Dit werkt alleen met deze exacte patroon — u kunt niet toestaan dat de eventuele extra tekens.

<label for=”creditcard”>credit card nummer:</label> <input patroon=”[0-9]*” type=”text” name=”creditcard”>

iOS met patroon kenmerk

Houd in gedachten dat een iPhone niet laat de gebruiker de schakelaar type toetsenbord wanneer het toetsenbord wordt weergegeven. Zorg ervoor dat dit de enige sleutel die ze nodig hebben in te vullen in de invoer goed.

Als u wilt om een toetsenbord van grote numerieke toetsen op iOS, moet u gebruik maken van het patroon kenmerk ook op het aantal ingangen. Anders krijg je kleine en vinger-vriendelijke knoppen:

iOS toetsenbord voor <input type=”aantal”>

Een Betere Oplossing: `inputmode`

inputmode is een WHATWG spec voor een paar jaar, en uiteindelijk geïmplementeerd in Chrome vanaf versie 66:

Deze browser ondersteunt data is van Caniuse, die heeft meer detail. Een aantal geeft aan dat browser ondersteunt de functie aan die versie.

Desktop

ChromeOperaFirefoxIEEdgeSafari
66 Geen 20 Geen Geen Geen

Mobiele / Tablet

iOS SafariOpera MobileOpera MiniAndroidAndroid ChromeAndroid Firefox
Geen Geen Geen Geen Geen Geen

Voor de meest uitgebreide ondersteuning mogelijk is, kan worden gecombineerd met het patroon attribuut voor iOS:

<label for=”creditcard”>credit card nummer:</label> <input inputmode=”numeric” patroon=”[0-9]*” type=”text” name=”creditcard”>

Dit geeft ontwikkelaars de volledige controle van de mobile UI zonder enige extra bagage. Het maakt de UI vinger-vriendelijk terwijl ze veelzijdiger is dan het patroon kenmerk als we toestaan dat alle personages die we willen. Het bestuurt één ding en één ding alleen. inputmode is een geweldige oplossing voor die gevallen wanneer het is ongepast om te gebruiken type=”number”.

Sommige mensen zou verder willen gaan en sloot type=”number” helemaal eens inputmode heeft een betere ondersteuning. Ik ben er niet van overtuigd dat het verstandig is, maar type=”aantal” kan problematisch zijn.

als (numberInput.geldigheid.valueMissing) {
errorMessage.textContent = ‘veld mag niet leeg zijn”
}

In tegenstelling tot het menselijk oog, dan is het veld leeg…

Als u wilt uitdrukkelijk te waarschuwen voor de lege aantal ingangen, moet u gebruik maken van:

als (numberInput.geldigheid.valueMissing && !numberInput.geldigheid.badInput) {
errorMessage.textContent = ‘veld mag niet leeg zijn”
}

Volgens Google gebruikers verlaten aankopen tweemaal zo vaak op mobiel ten opzichte van desktop. Verkoop op telefoons account voor slechts één derde van alle voltooide online aankopen. Duidelijk mensen tolereren geen gestuntel door slecht ontworpen formulieren en slagen op kleine ingangen. Invoer van gegevens moet worden moeiteloos. Terwijl de steun van de browser is momenteel laag, we zijn pas echt te wachten op mobiele browsers. Desktop support is grotendeels irrelevant. De input-elementen geïntroduceerd door HTML5 zijn geweldig, maar ze missen de rand gevallen. Dit in kunt vullen een aantal hiaten.