Majuscules automatiques pour mobile

Paul Kinlan

Cette fonctionnalité peut sembler être la plus anodine qui existe, mais je pense qu'elle est importante, car tout le monde déteste taper du texte sur un mobile. Dans Chrome pour Android (version antérieure à Chrome 43, version bêta d'avril 2015), un développeur a peu de contrôle sur la façon dont le navigateur peut aider l'utilisateur à saisir du texte. Si vous saisissez du texte sur un appareil aujourd'hui, cela peut ressembler à ceci:

Notez que tout est en minuscule, à l'exception de certaines valeurs qu'Android a reconnues comme étant un nom.

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

À partir de Chrome 43, Chrome sera compatible avec l'attribut autocapitalize à la fois pour HTMLInputElement et HTMLTextAreaElement, ce qui vous permettra de contrôler le comportement de mise en majuscule automatique du clavier virtuel et de l'aligner sur 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, la mise en majuscule automatique est désactivée.

Voici un exemple simple qui vous permet de mettre en majuscule les phrases dans une zone de texte:

<textarea autocapitalize="sentences">

Quelles valeurs peut-on utiliser pour la mise en majuscule automatique ?

Le tableau suivant présente les différents états dans lesquels un élément d'entrée peut se trouver:

État Mots clés
<input>
<input autocapitalize=off> 		Sans majuscules none [par défaut]
désactivé
<input autocapitalize=characters> Utilisation de minuscules/majuscules caractères
<input autocapitalize=words> Utilisation de minuscules/majuscules mots
<input autocapitalize=sentences> Mise en majuscules des phrases Phrases

Pour HTMLInputElement, la valeur par défaut non valide est Capitalisation des phrases si le type de l'élément est type=text ou type=search. Sinon, elle est Pas de majuscule.

  • <input autocapitalize="simon"> correspond à un champ de texte avec la mise en majuscule des phrases.
  • <input type="email" autocapitalize="simon"> correspond à un champ de texte avec Pas de majuscules.
  • <input> correspond à un champ de texte avec Pas de majuscules.

Pour HTMLTextAreaElement, la valeur par défaut non valide est Capitalisation des phrases. Il s'agit d'un changement par rapport au comportement par défaut.

  • <textarea autocapitalize="terry"></textarea> correspond à une zone de texte avec la mise en majuscule des phrases.
  • <textarea></textarea> correspond à une zone de texte avec la mise en majuscules des phrases.
  • <textarea autocapitalize="none"></textarea> correspond à une zone de texte avec Pas de mise en 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 la mise en majuscule automatique dans le formulaire:

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

Ce comportement est étrange, car l'état par défaut de HTMLInputElement est Pas de majuscule.

Pourquoi utilisez-vous cette méthode plutôt que inputmode ?

inputmode est conçu pour résoudre le même type de problème, entre autres. Cependant, il manque des implémentations de navigateurs. À notre connaissance, seul Firefox OS en propose une, et elle est préfixée (x-inputmode). De plus, elle est très peu utilisée sur le Web. En revanche, autocapitalize est déjà utilisé sur des millions de pages de centaines de milliers de sites Web.

Quand utiliser cette fonctionnalité ?

Cette liste n'est pas exhaustive des cas où vous devez utiliser autocapitalize. Toutefois, il existe de nombreux cas où aider l'utilisateur à saisir du texte est très utile:

  • Utilisez autocapitalization=words si vous :
    • Attendre des noms de personnes (remarque: tous les noms ne suivent pas cette règle, mais la majorité des noms occidentaux seront mis en majuscules automatiquement, comme prévu)
    • Nom de l'entreprise
    • Adresses
  • Utilisez autocapitalization=characters si vous attendez :
    • États américains
    • Codes postaux britanniques
  • Utilisez sentences pour les éléments de saisie si vous attendez un contenu saisi sous forme de paragraphe normal (par exemple, un article de blog).
  • Utilisez none sur les TextAreas si vous attendez un contenu qui ne doit pas être affecté (par exemple, la saisie de code).
  • Si vous ne souhaitez pas utiliser d'indices, n'ajoutez pas la mise en majuscule automatique.