Automatisch hoofdlettergebruik voor mobiel

Paul Kinlan

Dit lijkt misschien de meest oninteressante functie die er bestaat, maar ik denk dat het belangrijk is omdat iedereen niet van typen op mobiel houdt: jij haat het, ik verafschuw het. In Chrome voor Android (vóór Chrome 43 - Bèta vanaf april 2015) heeft een ontwikkelaar weinig controle over hoe de browser de gebruiker kan helpen tekst in te voeren. Als u vandaag op een apparaat typt, kan het er als volgt uitzien:

Merk op dat alles in kleine letters staat, afgezien van enkele waarden waarvan Android herkende dat het een naam was.

Apple heeft in iOS 5 een attribuut geïntroduceerd op HTMLInputElement en HTMLTextAreaElement , autocapitalize genaamd, en hiermee kan de auteur van de pagina aangeven hoe de browser het virtuele toetsenbord aan een gebruiker moet presenteren om de tekstinvoer voor de gebruiker te optimaliseren. In de eenvoudigste vorm zou je kunnen aangeven dat een tekstvak automatisch de eerste letter van elke nieuwe zin met een hoofdletter moet beginnen.

Vanaf Chrome 43 ondersteunt Chrome het autocapitalize- attribuut op zowel HTMLInputElement als HTMLTextAreaElement , waarmee u het autokapitalisatiegedrag van het virtuele toetsenbord kunt controleren en in lijn kunt brengen met Safari op iOS.

autocapitalize is alleen van toepassing op HTMLInputElement -programma's waarbij het type- attribuut is ingesteld op: type="text" , type="search" , type="url" , type="tel" , type="email" of type="password" . De standaardinstelling is om niet automatisch hoofdletters te gebruiken.

Hier is een eenvoudig voorbeeld waarmee u zinnen in een tekstgebied automatisch met hoofdletters kunt omzetten: 

<textarea autocapitalize="sentences">

Welke waarden kan autokapitalisatie aannemen?

De volgende tabel toont de verschillende statussen waarin een invoerelement zich kan bevinden:

Staat Trefwoorden
<input>
<input autocapitalize=off>		 Geen hoofdlettergebruik geen [standaard]
uit
<input autocapitalize=characters> Hoofdlettergebruik van karakters karakters
<input autocapitalize=words> Hoofdlettergebruik van woorden woorden
<input autocapitalize=sentences> Zinnen met hoofdletters zinnen

Voor HTMLInputElement is de ongeldige waarde standaard Hoofdlettergebruik van zinnen als het type element type= text of type= search is. Anders is het Geen hoofdlettergebruik .

  • <input autocapitalize="simon"> zou een tekstveld zijn met hoofdlettergebruik van zinnen
  • <input type="email" autocapitalize="simon"> zou een tekstveld zijn zonder hoofdletters .
  • <input> zou een tekstveld zijn zonder hoofdletters .

Voor HTMLTextAreaElement is de ongeldige standaardwaarde Sentences Capitalization . Dit is een verandering ten opzichte van het standaardgedrag.

  • <textarea autocapitalize="terry"></textarea> zou een tekstgebied zijn met hoofdlettergebruik van zinnen
  • <textarea></textarea> zou een tekstgebied zijn met zinshoofdletters .
  • <textarea autocapitalize="none"></textarea> zou een tekstgebied zonder hoofdlettergebruik zijn.

Voor HTMLFormElement hebben we besloten het attribuut niet te implementeren, omdat we hebben ontdekt dat het tegenwoordig zelden op pagina's wordt gebruikt, en wanneer het wel wordt gebruikt, wordt het meestal gebruikt om automatisch hoofdlettergebruik op het formulier volledig uit te schakelen:

<form autocapitalize=off><input></form>

Het bovenstaande is vreemd, omdat de standaardstatus voor HTMLInputElement No Capitalization is.

Waarom gebruik je dit via inputmode ?

inputmode is onder andere bedoeld om hetzelfde type probleem op te lossen. Het ontbrak echter aan browserimplementaties - voor zover wij weten heeft alleen Firefox OS een implementatie en deze wordt voorafgegaan door (x-inputmode) - maar het wordt ook zeer weinig gebruikt op internet. Aan de andere kant wordt autocapitalize al op miljoenen pagina's op honderdduizenden websites gebruikt.

Wanneer moet ik dit gebruiken?

Dit is geen uitputtende lijst van wanneer u autocapitalize moet gebruiken; Er zijn echter een aantal plaatsen waar het helpen van de gebruiker bij het invoeren van tekst van grote waarde is:

  • Gebruik autocapitalization=words als dat zo is
    • De namen van mensen verwachten (let op: niet alle namen volgen deze regel, maar de meeste westerse namen worden zoals verwacht automatisch met een hoofdletter geschreven)
    • Bedrijfsnamen
    • Adressen
  • Gebruik autocapitalization=characters als u het volgende verwacht:
    • Amerikaanse staten
    • Britse postcodes
  • Gebruik sentences voor invoerelementen als u inhoud verwacht die in de normale alineavorm wordt ingevoerd, bijvoorbeeld een blogpost.
  • Gebruik none op TextAreas als u inhoud verwacht die niet wordt beïnvloed, bijvoorbeeld als u code invoert.
  • Als u geen hints wilt, voeg dan geen automatisch hoofdlettergebruik toe.