Fokus auf das Eingabefeld in Angular setzen

Wenn ein Eingabefeld erscheint, lässt sich der Fokus darauf setzen, indem eine benutzerdefinierte Direktive nach dem Einblenden des Formulars die Methode focus() des DOM-Elements aufruft. Das folgende Beispiel verwendet AngularJS 1.x, das ältere Framework; es ist kein Beispiel für das moderne Angular. ng-model bindet den Wert des Eingabefelds an eine Modelleigenschaft, setzt aber weder den Fokus noch validiert es den Inhalt.

Schritte zum Setzen des Fokus auf das Eingabefeld in Angular

Ein kleines Ersatzobjekt macht den Aufruf von focus() isoliert sichtbar. Diese JavaScript-Veranschaulichung führt weder AngularJS noch einen Browser aus; die vollständige Einbindung für den Browser folgt weiter unten.

Führe dieses Beispiel aus:

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

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

Focused: true

Die unveränderte Ausgabe lautet Focused: true; Focused: ist dabei die englische Beschriftung. In AngularJS registrierst du die Direktive im selben Modul wie den Controller und fügst dem Eingabefeld anschließend ihr Attribut focus-me hinzu. Der Click-Handler blendet das Formular ein und setzt den Fokus-Trigger. Ein kurzes $timeout gibt AngularJS Zeit, die Ansicht zu aktualisieren, bevor die Direktive das sichtbare Element fokussiert.

Die folgende eigenständige Browserseite enthält das Modul, den Controller, die Direktive und das Markup. Ersetze die URL des AngularJS-Skripts durch eine lokal gehostete Kopie, falls deine Anwendung das CDN nicht verwendet. Die Seite verwendet AngularJS 1.0.4, passend zur Version des ursprünglichen Beispiels. Diese ältere Version dient nur zur Einordnung und wird für neue Anwendungen nicht empfohlen.

<!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 normalisiert das Attribut focus-me zum Namen der Direktive focusMe. Die Eigenschaft im isolierten Scope verwendet denselben Namen wie das Attribut; die =-Bindung verknüpft sie mit focusInput im Controller. Setzt die Schaltfläche diesen Wert auf true, plant der Watcher den Fokus nach der Aktualisierung der Ansicht ein und setzt den Wert danach zurück, damit sich die Aktion erneut auslösen lässt. Das Eingabefeld muss sichtbar und aktiviert sein, damit der Browser es fokussieren kann. Der Browser stellt den Fokusindikator mit seinen eigenen Stilen dar; sein Aussehen kann sich daher je nach Browser und Design unterscheiden.

Der Fokus setzt den Tastaturcursor in das Feld. Er bestätigt weder, dass ein Wert gültig ist, noch verhindert er Tippfehler. Wenn Eingaberegeln erforderlich sind, ergänze die Formularvalidierung von AngularJS separat. ngBlur reagiert darauf, dass ein Element den Fokus verliert, etwa wenn die nutzende Person mit der Tabulatortaste weitergeht. Die Direktive ist weder nötig, um das Eingabefeld zu fokussieren, noch um den Fokus wieder zu lösen. Das Browserbeispiel wurde nicht zur Laufzeit überprüft.

Dieses Muster kann einen zusätzlichen Klick vermeiden, wenn ein Formular erscheint, und das nächste Eingabeziel klarer machen. Setze automatischen Fokus gezielt ein: Unerwartete Fokuswechsel können Menschen, die die Tastatur oder einen Screenreader verwenden, überraschen, insbesondere bei längeren Abläufen. Sorge für eine sichtbare Beschriftung und eine klare Tab-Reihenfolge, und ermögliche es den Nutzenden, den Fokus nach dem Fokussieren des Feldes wie gewohnt weiterzubewegen.