Wie setzt man den Fokus auf ein Eingabefeld?

Question

Was ist der 'Angular Way', um den Fokus auf ein Eingabefeld in AngularJS zu setzen?

Weitere spezifische Anforderungen:

1. Wenn ein Modal geöffnet wird, den Fokus auf ein vordefiniertes innerhalb dieses Modals setzen.
2. Jedes Mal, wenn ein sichtbar wird (z. B. durch Klicken auf eine Schaltfläche), den Fokus darauf setzen.

Ich habe versucht, die erste Anforderung zu erreichen mit autofocus, aber das funktioniert nur, wenn das Modal zum ersten Mal geöffnet wird, und nur in bestimmten Browsern (z. B. in Firefox funktioniert es nicht).

Answer 1

Dies funktioniert gut und ist eine Angular-Methode, um die Eingabesteuerung zu fokussieren

angular.element('#elementId').focus()

Dies ist zwar kein rein angulärer Weg, um die Aufgabe zu erledigen, aber die Syntax folgt dem Angular-Stil. jQuery spielt eine Rolle und greift indirekt und direkt auf das DOM zu, indem es Angular (jQLite => JQuery Light) verwendet.

Bei Bedarf kann dieser Code problemlos in einer einfachen Angular-Direktive platziert werden, in der das Element direkt zugänglich ist.

Answer 2

Ich denke nicht, dass $timeout ein guter Weg ist, um das Element bei der Erstellung zu fokussieren. Hier ist eine Methode, die die integrierte Angular-Funktionalität verwendet, ausgegraben aus den trüben Tiefen der Angular-Dokumentation. Beachten Sie, wie das Attribut "link" in "pre" und "post" aufgeteilt werden kann, für Pre-Link- und Post-Link-Funktionen.

Arbeitsbeispiel: http://plnkr.co/edit/Fj59GB

// dies ist die Direktive, die Sie zu jedem Element hinzufügen, das nach der Erstellung hervorgehoben werden soll
Guest.directive('autoFocus', function() {
    return {
        link: {
            pre: function preLink(scope, element, attr) {
                console.debug('prelink aufgerufen');
                // dies schlägt fehl, da das Element noch nicht gerendert wurde
                //element[0].focus();
            },
            post: function postLink(scope, element, attr) {
                console.debug('postlink aufgerufen');
                // dies gelingt, da das Element gerendert wurde
                element[0].focus();
            }
        }
    }
});

Vollständige AngularJS-Direktiven-Dokumentation: https://docs.angularjs.org/api/ng/service/$compile

Answer 3

Hier ist meine originale Lösung:

plunker

var app = angular.module('plunker', []);
app.directive('autoFocus', function($timeout) {
    return {
        link: function (scope, element, attrs) {
            attrs.$observe("autoFocus", function(newValue){
                if (newValue === "true")
                    $timeout(function(){element[0].focus()});
            });
        }
    };
});

Und das HTML:

Eingabe umschalten

Was es tut:

Es fokussiert die Eingabe, wenn sie mit ng-show sichtbar wird. Keine Verwendung von $watch oder $on hier.

Answer 4

Ich habe eine zweifache Bindungs-Fokus-Anweisung geschrieben, genau wie kürzlich das Modell.

Sie können die Fokus-Anweisung folgendermaßen verwenden:

Wenn Sie die someFocusVariable-Scope-Variablen true irgendwo in Ihrem Controller setzen, wird das Eingabefeld fokussiert. Und wenn Sie Ihr Eingabefeld "ausblenden" möchten, kann someFocusVariable auf false gesetzt werden. Es ist ähnlich wie die erste Antwort von Mark Rajcok, aber mit zweifacher Bindung.

Hier ist die Anweisung:

function Ctrl($scope) {
  $scope.model = "ahaha"
  $scope.someFocusVariable = true; // Wenn Sie anfangs den Fokus setzen möchten, setzen Sie dies auf true. Andernfalls müssen Sie dies überhaupt nicht definieren.
}

angular.module('experiement', [])
  .directive('focus', function($timeout, $parse) {
    return {
      restrict: 'A',
      link: function(scope, element, attrs) {
          scope.$watch(attrs.focus, function(newValue, oldValue) {
              if (newValue) { element[0].focus(); }
          });
          element.bind("blur", function(e) {
              $timeout(function() {
                  scope.$apply(attrs.focus + "=false"); 
              }, 0);
          });
          element.bind("focus", function(e) {
              $timeout(function() {
                  scope.$apply(attrs.focus + "=true");
              }, 0);
          })
      }
    }
  });

Verwendung:

    Eine Eingabe: 

        Fokus!  
        someFocusVariable: {{ someFocusVariable }}
        Inhalt: {{ model }}

Hier ist der Fiddle:

http://fiddle.jshell.net/ubenzer/9FSL4/8/

Answer 5

Für diejenigen, die Angular mit dem Bootstrap-Plugin verwenden:

http://angular-ui.github.io/bootstrap/#/modal

Sie können sich in das opened Versprechen der Modalinstanz einklinken:

modalInstance.opened.then(function() {
        $timeout(function() {
            angular.element('#title_input').trigger('focus');
        });
    });

modalInstance.result.then(function ( etc...