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 fand es nützlich, einen allgemeinen Ausdruck zu verwenden. Auf diese Weise können Sie Dinge wie das automatische Verschieben des Fokus aktivieren, wenn der Eingabetext gültig ist

Oder automatisch den Fokus setzen, wenn der Benutzer ein Feld mit fester Länge ausfüllt

Und natürlich den Fokus nach dem Laden setzen

Der Code für die Direktive:

.directive('mooFocusExpression', function ($timeout) {
    return {
        restrict: 'A',
        link: {
            post: function postLink(scope, element, attrs) {
                scope.$watch(attrs.mooFocusExpression, function (value) {

                    if (attrs.mooFocusExpression) {
                        if (scope.$eval(attrs.mooFocusExpression)) {
                            $timeout(function () {
                                element[0].focus();
                            }, 100); //braucht eine Verzögerung um mit ng-disabled zu arbeiten
                        }
                    }
                });
            }
        }
    };
});

Answer 2

Nicht, um einen Zombie zu wiederbeleben oder meine eigene Direktive anzuschließen (okay, das ist genau das, was ich mache):

https://github.com/hiebj/ng-focus-if

http://plnkr.co/edit/MJS3zRk079Mu72o5A9l6?p=preview

(function() {
    'use strict';
    angular
        .module('focus-if', [])
        .directive('focusIf', focusIf);

    function focusIf($timeout) {
        function link($scope, $element, $attrs) {
            var dom = $element[0];
            if ($attrs.focusIf) {
                $scope.$watch($attrs.focusIf, focus);
            } else {
                focus(true);
            }
            function focus(condition) {
                if (condition) {
                    $timeout(function() {
                        dom.focus();
                    }, $scope.$eval($attrs.focusDelay) || 0);
                }
            }
        }
        return {
            restrict: 'A',
            link: link
        };
    }
})();

Answer 3

Zunächst gibt es einen offiziellen Weg, um den Fokus auf Fahrplan für 1.1 zu setzen. In der Zwischenzeit können Sie eine Direktive schreiben, um den Fokus einzustellen.

Zweitens erfordert das Setzen des Fokus auf ein Element nachdem es sichtbar geworden ist derzeit einen Workaround. Verzögern Sie einfach Ihren Aufruf des focus() Elements mit einem $timeout.

Weil das gleiche Controller-verändert-DOM-Problem für focus, blur und select besteht, schlage ich vor, eine ng-target Direktive zu haben:

Fokus setzen

Angular-Thread hier: http://goo.gl/ipsx4, und weitere Details hier gebloggt: http://goo.gl/4rdZa

Die folgende Direktive wird eine .focus() Funktion innerhalb Ihres Controllers erstellen, wie von Ihrem ng-target Attribut angegeben. (Es erstellt auch ein .blur() und ein .select().) Demo: http://jsfiddle.net/bseib/WUcQX/

Answer 4

Anstatt Ihre eigene Direktive zu erstellen, ist es möglich, einfach JavaScript-Funktionen zu verwenden, um einen Fokus zu erreichen.

Hier ist ein Beispiel.

In der HTML-Datei:

In einer JavaScript-Datei, in einem Controller zum Beispiel, wo Sie den Fokus aktivieren möchten:

document.getElementById("myInputId").focus();

Answer 5

Wenn Sie einfach einen einfachen Fokus wollten, der von einem ng-click gesteuert wurde.

Html:

Direktive:

'use strict'

angular.module('focus',['ng'])
.directive('utFocus',function($timeout){
    return {
        link:function(scope,elem,attr){
            var focusTarget = attr['utFocus'];
            scope.$watch(focusTarget,function(value){
                $timeout(function(){
                    elem[0].focus();
                });
            });
        }
    }
});