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

Ich habe Mark Rajcoks FokusMe-Direktive bearbeitet, damit sie für mehrere Fokus in einem Element funktioniert.

HTML:

im AngularJs Controller:

$scope.myInputFocus= true;

AngularJS Direktive:

app.directive('focusMe', function ($timeout, $parse) {
    return {
        link: function (scope, element, attrs) {
            var model = $parse(attrs.focusMe);
            scope.$watch(model, function (value) {
                if (value === true) {
                    $timeout(function () {
                        scope.$apply(model.assign(scope, false));
                        element[0].focus();
                    }, 30);
                }
            });
        }
    };
});

Answer 2

Wenn Sie den Fokus auf ein bestimmtes Element setzen möchten, können Sie den folgenden Ansatz verwenden.

1. Erstellen Sie einen Service namens focus.

   angular.module('application')
   .factory('focus', function ($timeout, $window) {
       return function (id) {
           $timeout(function () {
               var element = $window.document.getElementById(id);
               if (element)
                   element.focus();
           });
       };
   });

2. Injizieren Sie es in den Controller, von dem aus Sie aufrufen möchten.

3. Rufen Sie diesen Service auf.

Answer 3

Alle vorherigen Antworten funktionieren nicht, wenn das gewünschte Fokuselement in einer Direktivenvorlage eingefügt wird. Die folgende Direktive passt sowohl zu einfachen Elementen als auch zu Direktiven, die eingefügt werden (ich habe es in Typescript geschrieben). Sie akzeptiert einen Selektor für ein inneres fokussierbares Element. Wenn Sie einfach das eigene Element fokussieren müssen, senden Sie keinen Selektorparameter an die Direktive :

modul APP.Directives {

export class FocusOnLoadDirective implements ng.IDirective {
    priority = 0;
    restrict = 'A';

    constructor(private $interval:any, private $timeout:any) {

    }

    link = (scope:ng.IScope, element:JQuery, attrs:any) => {
        var _self = this;
        var intervalId:number = 0;

        var clearInterval = function () {
            if (intervalId != 0) {
                _self.$interval.cancel(intervalId);
                intervalId = 0;
            }
        };

        _self.$timeout(function(){

                intervalId = _self.$interval(function () {
                    let focusableElement = null;
                    if (attrs.focusOnLoad != '') {
                        focusableElement = element.find(attrs.focusOnLoad);
                    }
                    else {
                        focusableElement = element;
                    }
                    console.debug('focusOnLoad directive: trying to focus');
                    focusableElement.focus();
                    if (document.activeElement === focusableElement[0]) {
                        clearInterval();
                    }
                }, 100);

                scope.$on('$destroy', function () {
                    // Stellen Sie sicher, dass auch das Intervall zerstört wird
                    clearInterval();
                });

        });
    };

    public static factory = ():ng.IDirectiveFactory => {
        let directive = ($interval:any, $timeout:any) => new FocusOnLoadDirective($interval, $timeout);
        directive.$inject = ['$interval', '$timeout'];
        return directive;
    };
}

angular.module('common').directive('focusOnLoad', FocusOnLoadDirective.factory());

}

Beispiel für die Verwendung mit einem einfachen Element:

Beispiel für die Verwendung mit einem inneren Element (normalerweise für dynamisch eingefügte Elemente wie Direktiven mit Vorlage):

Sie können anstelle von "input" jeden jQuery-Selektor verwenden

Answer 4

Wenn Sie modalInstance verwenden und das Objekt haben, können Sie "then" verwenden, um Aktionen nach dem Öffnen des Modals auszuführen. Wenn Sie modalInstance nicht verwenden und den Modal hart codiert öffnen, können Sie das event verwenden. Das $timeout ist keine gute Lösung.

Sie können Folgendes tun (Bootstrap3):

$("#" + modalId).on("shown.bs.modal", function() {
    angular.element("[name='name']").focus();
});

Bei modalInstance können Sie sich die Bibliothek ansehen, um zu sehen, wie der Code nach dem Öffnen des Modals ausgeführt werden soll.

Verwenden Sie $timeout nicht auf diese Weise, da $timeout 0, 1, 10, 30, 50, 200 oder mehr sein kann, was vom Client-Computer und dem Prozess zum Öffnen des Modals abhängt.

Verwenden Sie kein $timeout, lassen Sie die Methode Ihnen sagen, wann Sie den Fokus setzen können ;)

Ich hoffe, das hilft! :)

Answer 5

Die folgende Direktive hat bei mir funktioniert. Verwenden Sie dasselbe Autofokus-HTML-Attribut für die Eingabe.

.directive('autofocus', [function () {
    return {
        require : 'ngModel',
        restrict: 'A',
        link: function (scope, element, attrs) {
            element.focus();
        }
    };
}])