Majuscules automatiques pour mobile

Paul Kinlan

Cette fonctionnalité peut sembler être la moins impressionnante qui existe, mais elle est importante, car tout le monde n'aime pas saisir sur mobile: vous détestez, je déteste. Dans Chrome pour Android (antérieures à la version 43 bêta de Chrome en avril 2015), les développeurs ont peu de contrôle sur la façon dont le navigateur peut aider les utilisateurs à saisir du texte. Si vous saisissez du texte sur un appareil aujourd'hui, l'interface pourrait ressembler à ceci:

Notez que tout est en minuscules, à l'exception de certaines valeurs reconnues par Android comme un nom.

Apple a introduit un attribut sur HTMLInputElement et HTMLTextAreaElement appelé majuscules automatiques dans iOS 5. Il permet à l'auteur de la page d'indiquer comment le clavier virtuel doit être présenté à l'utilisateur afin d'optimiser la saisie de texte. Dans sa forme la plus simple, vous pouvez indiquer qu'une zone de texte doit automatiquement mettre en majuscule la première lettre de chaque nouvelle phrase.

À partir de Chrome 43, Chrome prendra en charge l'attribut autocapitalize (majuscules automatiques) sur HTMLInputElement et HTMLTextAreaElement, ce qui vous permettra de contrôler le comportement des majuscules automatiques du clavier virtuel et de l'aligner avec Safari sur iOS.

autocapitalize ne s'applique qu'aux HTMLInputElement dont l'attribut type est défini sur type="text", type="search", type="url", type="tel", type="email" ou type="password". Par défaut, les majuscules ne sont pas utilisées automatiquement.

Voici un exemple simple vous permettant de mettre en majuscules automatiquement les phrases d'une zone de texte:

<textarea autocapitalize="sentences">

Quelles valeurs les majuscules automatiques peuvent-elles prendre ?

Le tableau suivant présente les différents états possibles d'un élément d'entrée:

État Mots clés
<input>
<input autocapitalize=off> 		Pas de majuscules none [par défaut]
désactivé
<input autocapitalize=characters> Majuscules aux caractères caractères
<input autocapitalize=words> Mise en majuscules des mots mots
<input autocapitalize=sentences> Majuscules dans les phrases Phrases

Pour HTMLInputElement, la valeur par défaut est Majuscules dans les phrases si le type de l'élément est type=text ou type=search. Sinon, il est sans majuscules.

  • <input autocapitalize="simon"> serait un champ de texte avec Majuscules dans les phrases.
  • <input type="email" autocapitalize="simon"> correspond à un champ de texte sans majuscules.
  • <input> correspond à un champ de texte sans majuscules.

Pour HTMLTextAreaElement, la valeur par défaut est Majuscules dans les phrases. Il s'agit d'un changement par rapport au comportement par défaut.

  • <textarea autocapitalize="terry"></textarea> serait une zone de texte avec Majuscules dans les phrases.
  • <textarea></textarea> serait une zone de texte avec Majuscules dans les phrases.
  • <textarea autocapitalize="none"></textarea> correspond à une zone de texte sans majuscules.

Pour HTMLFormElement, nous avons décidé de ne pas implémenter l'attribut, car nous avons constaté qu'il est rarement utilisé sur les pages aujourd'hui. Lorsqu'il est utilisé, il sert principalement à désactiver complètement les majuscules automatiques dans le formulaire:

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

La réponse ci-dessus est impaire, car l'état par défaut de HTMLInputElement est Pas de majuscules.

Pourquoi l'utilisez-vous sur inputmode ?

inputmode est conçu pour résoudre le même type de problème, entre autres. Cependant, il manque d'implémentations de navigateur. À notre connaissance, seul Firefox OS dispose d'une implémentation et est préfixé (x-inputmode), mais son utilisation sur le Web est également très faible. En revanche, autocapitalize est déjà utilisé sur des millions de pages appartenant à des centaines de milliers de sites Web.

Quand dois-je l'utiliser ?

Cette liste n'est pas exhaustive. Elle indique quand utiliser autocapitalize. Toutefois, il existe un certain nombre d'intérêts pour l'utilisateur à saisir du texte:

  • Utilisez autocapitalization=words si :
    • Noms attendus (remarque: tous les noms ne suivent pas cette règle, mais la plupart des noms occidentaux commencent automatiquement par une majuscule).
    • Nom de l'entreprise
    • Adresses
  • Utilisez autocapitalization=characters si vous attendez :
    • États américains
    • Codes postaux britanniques
  • Utilisez sentences pour les éléments d'entrée si vous attendez du contenu saisi sous forme de paragraphe normal, comme un article de blog.
  • Utilisez none sur TextAreas si vous prévoyez du contenu qui ne devrait pas être affecté, par exemple pour la saisie de code.
  • Si vous ne voulez pas d'indice, n'ajoutez pas de majuscules automatiques.