Faire le focus auto. sur un input pour améliorer vos formulaires

Que ce soit sur un site web ou une application, si vous avez des formulaires que les utilisateurs et utilisatrices doivent utiliser très régulièrement, cette petite astuce pourrait leur changer la vie !

Ou au moins leur faire gagner un temps précieux.

Activer un champ automatiquement (autofocus)

L'autofocus permet de rendre un champ éditable dès l'instant où le formulaire est affiché à l'écran, ce qui évite à l'utilisateur de reprendre sa souris, glisser, cliquer et revenir sur le clavier.

Ca peut paraitre dérisoire, mais pour les "power-user", la différence d'expérience utilisateur n'est pas négligeable !

Il y a deux manières de faire pour activer un champ de formulaire, qui possèdent leurs avantages et leurs inconvénients.

Version HTML

C'est la version la plus simple à mettre en place, car il suffit simplement d'ajouter l'attribut "autofocus" à votre input, comme ceci :

<input text="text" id="username-input" autofocus />

Mais attention, cela ne fonctionne pas toujours si votre formulaire est affiché de manière dynamique (popup par exemple). Pour cela, il faudra utiliser la version JavaScript !

Si plusieurs éléments ont l'attribut autofocus sur la même page, seul le premier sera pris en compte !

Version JavaScript

Il est possible d'activer le focus d'un élément à n'importe quel moment dans votre script, même si un autre élément est déjà activé. Pour cela, il vous suffit d'utiliser la méthode focus() :

const input = document.querySelector("#username-input");
input.focus();

À noter que le focus fonctionne aussi sur les boutons et les liens, pour faciliter la navigation au clavier et permettre à l'utilisateur de simplement appuyer sur "Entrée" !