Faire le focus auto. sur un input pour améliorer vos formulaires
Quand un simple attribut peut faire gagner de précieuses secondes à vos utilisateurs !
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" !
J'espère que cet article vous aura été utile, et à bientôt sur le blog !
Les articles les plus populaires du blog
Envie de continuer à lire des articles autour du développement web (entre autres) ? Voici la sélection des articles de mon blog les plus lus par la communauté !
Voir la sélection 🚀Recevez les articles de la semaine par e-mail pour ne rien manquer !
S'abonner à la newsletter 📧
À propos de l'auteur
Hello, je suis Nicolas Brondin-Bernard, ingénieur web indépendant depuis 2015 passionné par le partage d'expériences et de connaissances.
Aujourd'hui je suis aussi formateur/coach pour développeurs web juniors, tu peux me contacter sur nicolas@brondin.com, sur mon site ou devenir membre de ma newsletter pour ne jamais louper le meilleur article de la semaine et être tenu au courant de mes projets !