Automatisch hoofdlettergebruik voor mobiel

Paul Kinlan

Dit lijkt misschien de meest oninteressante functie die er bestaat, maar ik denk dat hij belangrijk is, omdat iedereen een hekel heeft aan typen op een mobiel apparaat: jij haat het, ik verafschuw het. In Chrome voor Android (vóór Chrome 43 - bètaversie vanaf april 2015) heeft een ontwikkelaar weinig controle over hoe de browser de gebruiker kan helpen bij het invoeren van tekst. Als je vandaag de dag op een apparaat typt, zou het er zo uit kunnen zien:

Let op, alles is in kleine letters, behalve enkele waarden die Android als naam herkende.

Apple introduceerde in iOS 5 een kenmerk voor HTMLInputElement en HTMLTextAreaElement , genaamd autocapitalize , waarmee de pagina-auteur een tip kan geven hoe de browser het virtuele toetsenbord moet weergeven om de tekstinvoer 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 weergeven.

Vanaf Chrome 43 ondersteunt Chrome het autocapitalize -kenmerk op zowel HTMLInputElement als HTMLTextAreaElement , waarmee u het automatische hoofdlettergebruik van het virtuele toetsenbord kunt bepalen en in lijn kunt brengen met Safari op iOS.

Autocapitalize wordt alleen toegepast op HTMLInputElement waarvan het type- attribuut is ingesteld op: type="text" , type="search" , type="url" , type="tel" , type="email" of type="password" . Standaard is autocapitalize niet van toepassing.

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 toestanden waarin een invoerelement zich kan bevinden:

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

Voor HTMLInputElement is de ongeldige standaardwaarde ' Zinnen met hoofdletters' als het type van het element type= text of type= search is. Anders is het 'Geen hoofdletters' .

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

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

  • <textarea autocapitalize="terry"></textarea> zou een tekstgebied zijn met zinnen met hoofdletters
  • <textarea></textarea> zou een tekstgebied zijn met zinshoofdlettergebruik .
  • <textarea autocapitalize="none"></textarea> zou een tekstgebied zijn zonder hoofdletters .

Voor HTMLFormElement hebben we besloten het kenmerk niet te implementeren, omdat we hebben gemerkt dat het tegenwoordig nog maar zelden op pagina's wordt gebruikt. Als het wel wordt gebruikt, is het meestal om automatische hoofdlettergebruik op het formulier volledig uit te schakelen:

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

Het bovenstaande is vreemd, omdat de standaardstatus voor HTMLInputElement Geen Hoofdletters is.

Waarom gebruik je dit in plaats van inputmode ?

inputmode is bedoeld om onder andere hetzelfde probleem op te lossen. Er zijn echter browserimplementaties voor, maar voor zover wij weten heeft alleen Firefox OS een implementatie en wordt deze voorafgegaan door (x-inputmode). Ook op internet wordt het nauwelijks gebruikt. autocapitalize daarentegen wordt al gebruikt op miljoenen pagina's van honderdduizenden websites.

Wanneer moet ik dit gebruiken?

Dit is geen volledige lijst van situaties waarin u autocapitalize moet gebruiken. Er zijn echter een aantal situaties waarin het helpen van de gebruiker bij het invoeren van tekst zeer waardevol is:

  • Gebruik autocapitalization=words als u
    • Verwachten dat namen van mensen kloppen (let op: niet alle namen volgen deze regel, maar de meeste westerse namen worden automatisch met een hoofdletter geschreven zoals verwacht)
    • Bedrijfsnamen
    • Adressen
  • Gebruik autocapitalization=characters als u het volgende verwacht:
    • Amerikaanse staten
    • Britse postcodes
  • Gebruik sentences voor invoerelementen als u inhoud verwacht die in normale alinea-vorm wordt ingevoerd, bijvoorbeeld een blogbericht.
  • Gebruik none voor TextAreas als u inhoud verwacht die niet mag worden beïnvloed, bijvoorbeeld het invoeren van code.
  • Als u geen hints wilt, hoeft u autocapitalize niet toe te voegen.