Définir le focus d'un élément de formulaire HTML en JavaScript

1. Définir le focus en entrée avec JavaScript
2. Définir le focus dans Textarea avec JavaScript
3. Définir le focus dans la zone de sélection ou la liste déroulante avec JavaScript

Se concentrer sur un champ pour la saisie de l’utilisateur est une fonctionnalité UI/UX qui permet de continuer à taper dans un champ sans cliquer dessus. Nous pouvons avoir besoin d’appliquer dynamiquement le focus sur un champ de formulaire, en particulier si le formulaire est long et comporte de nombreux champs de saisie. Si un champ de formulaire a une erreur de validation, il sera difficile pour l’utilisateur de comprendre le champ dans un tel scénario. Ainsi, avoir un focus sur le champ en javascript lors de la validation et du défilement automatique jusqu’au champ d’erreur indique l’erreur directement à l’utilisateur au lieu de perdre du temps à déterminer où se trouvait l’erreur. En JavaScript nous avons la méthode .focus(). Voyons comment nous pouvons les appliquer à ce qui suit.

Définir le focus en entrée avec JavaScript

Pour se concentrer sur un champ de saisie, nous devons d’abord sélectionner le champ. Il existe différentes méthodes pour le faire. Nous pouvons utiliser l’une des méthodes suivantes.

• document.getElementById() : interroge l’élément en fonction de son identifiant. Habituellement, les identifiants sont uniques, par conséquent, la fonction getElementById() renvoie l’élément de manière unique. S’il y a plus d’éléments avec le même identifiant, il renvoie le premier élément avec l’identifiant spécifié.
• document.getElementsByClassName() : Sélectionne l’élément en fonction de son nom de classe. Il renvoie généralement un tableau d’éléments qualifiant les critères.
• querySelector() : la méthode JavaScript sélectionne l’élément en fonction de son identifiant, du nom de la classe, ou encore avec la balise de l’élément HTML. La fonction renvoie un seul élément HTML qui satisfait les critères qui lui sont passés en paramètre. Dans cet article, nous utiliserons la fonction getElementById() pour simplifier la représentation. Une fois que nous avons sélectionné l’élément, nous pouvons définir le focus sur l’élément en utilisant la méthode .focus(). Voici la syntaxe pour .focus().

document.getElementById('input-id').focus();

Définir le focus sur un champ de saisie

Les jeux de codes suivants se concentrent sur le champ de saisie lors du chargement de la page.

<input id="username-input" type="text" name="username">

window.onload = function() {
  document.getElementById('username-input').focus();
}

Définir le focus sur un champ de saisie dans un formulaire HTML

Si l’élément d’entrée fait partie d’un formulaire, au lieu d’interroger l’élément à l’aide de getElementById(), nous pouvons utiliser la référence du nom du formulaire. La syntaxe pour l’utilisation est la suivante :

document.<Form name>.<Field name>.focus();

Par exemple, supposons que nous ayons un formulaire de connexion avec un champ de saisie. Nous pouvons définir le focus du champ de saisie en appliquant le code suivant. Le code se concentrera sur le champ de saisie du nom d’utilisateur. Il y a peu de choses à prendre en compte lors de l’utilisation du nom du formulaire et du nom du champ pour que le code suivant fonctionne.

<form name="LoginForm">
    <div>
        <label>User Name: </label>
        <input type="text" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
</form>

window.onload = function() {
  document.LoginForm.UserName.focus();
}

Remarques

• Lors de la définition du focus d’une entrée dans un formulaire, nous devons attribuer l’attribut name au formulaire HTML et au champ que nous ciblons. Si aucun nom n’est spécifié, il sera difficile de rechercher l’élément.
• Cette méthode ne prend pas en charge les noms de balise comportant des tirets dans cette méthode. Par conséquent, le nom attribué au formulaire HTML ou à l’élément doit être soit en majuscule (comme UserName) soit en minuscule (comme le nom d’utilisateur).
• Pour les formulaires plus longs avec de nombreux champs tels que la saisie, les zones de texte, etc., il est bon de définir l’attribut de défilement sur l’élément afin que le navigateur fasse automatiquement défiler l’élément HTML sélectionné. Il s’agit d’un comportement attendu par l’utilisateur. Sinon, il finira par se demander pourquoi le formulaire est invalide.

document.getElementById("myButton").focus({preventScroll:false});

Définir le focus dans Textarea avec JavaScript

Nous pouvons utiliser la fonction .focus() pour définir le focus sur une zone de texte. Habituellement, pour se concentrer dans une zone de texte, nous utilisons document.getElementById("my-text-area").focus(). Cela revient à utiliser la fonction .focus() dans un champ de saisie. Si nous avons l’intention d’utiliser la zone de texte à l’intérieur d’une balise de formulaire HTML, nous pouvons appliquer la référence de nom de formulaire avec le nom de la zone de texte pour nous concentrer dessus. Référez-vous au code suivant.

<form name="LoginForm">
    <div>
        <label>User Name: </label>
        <input type="text" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
    <div>
        <label>Description: </label>
        <textarea name="description"></textarea>
    </div>
</form>

window.onload = function() {
  document.LoginForm.description.focus();
}

Dans cette méthode, nous devons attribuer un nom au formulaire et à l’élément HTML cible. Les règles de nommage des éléments sont les mêmes que celles du champ de saisie.

Définir le focus dans la zone de sélection ou la liste déroulante avec JavaScript

La méthode .focus() fonctionne sur les boîtes de sélection ou les listes déroulantes. S’il est utilisé dans un formulaire, le document.FormName.SelectBoxName.focus() peut être utilisé pour définir le focus sur la liste déroulante. Voici le code élaborant sur l’utilisation.

<form name="LoginForm">
    <div>
        <label>User Name: </label>
        <input type="text" name="UserName">
    </div>
    <div>
        <label>Password: </label>
        <input type="password" name="password">
    </div>
    <div>
        <label>Description: </label>
        <textarea name="description"></textarea>
    </div>
    <div>
        <label>Occupation: </label>
        <select id="occupationSelect" autofocus>
            <option>Student</option>
            <option>Teacher</option>
            <option>Engineer</option>
        </select>
    </div>
</form>

window.onload = function() {
  document.LoginForm.occupationSelect.focus();
}