Définir le focus sur le champ de saisie dans Angular

Pour donner le focus à un champ lorsqu’il apparaît, utilisez une directive personnalisée qui appelle la méthode focus() de l’élément DOM après l’affichage du formulaire. L’exemple ci-dessous utilise AngularJS 1.x, l’ancien framework ; il ne s’agit pas d’un exemple pour Angular moderne. ng-model lie la valeur du champ à une propriété du modèle, mais ne donne pas le focus au champ et ne valide pas son contenu.

Étapes pour donner le focus au champ de saisie dans Angular

Un petit objet de remplacement permet de voir facilement l’appel à focus() de manière isolée. Cette illustration JavaScript n’exécute ni AngularJS ni un navigateur ; le câblage complet pour le navigateur suit.

Exécutez cet exemple :

const input = {
  focused: false,
  focus() {
    this.focused = true;
  }
};

input.focus();
console.log(`Focused: ${input.focused}`);

Focused: true

La sortie affichée est Focused: true : elle indique que le champ a le focus. Le libellé Focused: reste en anglais.

Dans AngularJS, enregistrez la directive dans le même module que le contrôleur, puis ajoutez son attribut focus-me au champ de saisie. Le gestionnaire de clic affiche le formulaire et active le déclencheur du focus. Un bref délai avec $timeout permet à AngularJS de terminer la mise à jour de la vue avant que la directive ne donne le focus à l’élément visible.

La page autonome suivante, destinée au navigateur, comprend le module, le contrôleur, la directive et le balisage. Si votre application n’utilise pas le CDN, remplacez l’URL du script AngularJS par une copie hébergée localement. La page utilise AngularJS 1.0.4, comme l’exemple d’origine ; cette ancienne version est présentée à titre de contexte et n’est pas recommandée pour une nouvelle application.

<!doctype html>
<html ng-app="focusDemo">
<head>
  <meta charset="utf-8">
  <title>AngularJS input focus</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.js"></script>
  <script>
    var app = angular.module('focusDemo', []);

    app.controller('DemoController', ['$scope', function($scope) {
      $scope.showForm = false;
      $scope.focusInput = false;
    }]);

    app.directive('focusMe', ['$timeout', function($timeout) {
      return {
        scope: { focusMe: '=' },
        link: function(scope, element) {
          scope.$watch('focusMe', function(value) {
            if (value) {
              $timeout(function() {
                element[0].focus();
                scope.focusMe = false;
              });
            }
          });
        }
      };
    }]);
  </script>
</head>
<body ng-controller="DemoController">
  <button type="button" ng-click="showForm = true; focusInput = true">
    Show the form
  </button>

  <div ng-show="showForm">
    <label for="name">Name</label>
    <input id="name" type="text" ng-model="name" focus-me="focusInput">
    <button type="button" ng-click="showForm = false">Done</button>
    <p>The browser's focus indicator marks the active input.</p>
  </div>
</body>
</html>

AngularJS normalise l’attribut focus-me en nom de directive focusMe. La propriété de sa portée isolée porte le même nom que l’attribut, et la liaison = la relie à focusInput dans le contrôleur. Lorsque le bouton définit cette valeur sur true, le watcher programme la mise au point après la mise à jour de la vue, puis réinitialise la valeur afin que l’action puisse être déclenchée de nouveau. Le champ doit être visible et activé pour que le navigateur puisse lui donner le focus. Le navigateur affiche l’indicateur de focus selon ses propres styles ; son apparence peut donc varier d’un navigateur ou d’un thème à l’autre.

Le focus place le curseur de saisie dans le champ ; il ne confirme pas qu’une valeur est valide et n’empêche pas les erreurs de saisie. Si des règles sont nécessaires, ajoutez séparément la validation des formulaires AngularJS. ngBlur réagit lorsqu’un élément perd le focus, par exemple lorsque l’utilisateur passe à un autre élément avec la touche Tab ; cette directive n’est nécessaire ni pour donner le focus au champ ni pour le lui faire perdre. L’exemple destiné au navigateur n’a pas été vérifié à l’exécution.

Cette approche peut éviter un clic supplémentaire à l’apparition d’un formulaire et indiquer clairement où commencer à écrire. Utilisez le focus automatique avec discernement : un déplacement inattendu du focus peut surprendre les personnes qui utilisent le clavier ou un lecteur d’écran, surtout dans les parcours longs. Gardez un libellé visible, conservez un ordre de tabulation clair et laissez les utilisateurs déplacer normalement le focus après sa mise au point dans le champ.