Lassen Sie AngularJS das automatische Ausfüllen von Formularen durch den Browser unterstützen_AngularJS

In letzter Zeit haben sich viele Front-End-Studenten darüber beschwert, dass das Anmeldeformular ihr eigenes Konto nicht erfassen kann. Dies ist immer noch ein häufiges Problem bei Single-Page-Anwendungen und Webseiten, die Ajax häufig verwenden.

UserApp ist eine WebApp, die mit AngularJS erstellt wurde, aber die Funktion „Passwort speichern“ des Browsers nicht unterstützen konnte.
Hier sind einige der gefundenen Probleme:

Das Formular kann mit js nicht dynamisch in das DOM eingefügt werden.
Das Formular muss tatsächlich eine POST-Anfrage stellen. (Sie können den Formularinhalt nicht abrufen und dann eine Anfrage mit Ajax stellen)
Wenn der Browser das Formular automatisch ausfüllt, kann $scope die aktualisierten Daten nicht abrufen.
Firefox ist relativ einfach. Solange das Formularelement über ein Namensattribut verfügt und das Übermittlungsereignis ausgelöst wird, wird der Benutzer automatisch daran erinnert, ob Daten aufgezeichnet werden sollen.

Code kopieren Der Code lautet wie folgt:

Die Anforderungen an Firefox zum Aufzeichnen von Daten sind relativ einfach

Aber es gibt ein Problem mit Firefox. Nach dem automatischen Ausfüllen des Formulars werden die Daten in $scope nicht aktualisiert. Also habe ich gegoogelt und einige Hacks für dieses Problem gefunden. Aber ich habe immer das Gefühl, dass diese Lösungen unnötig sind, weil ich nur die Daten beim Absenden des Formulars mitbringen muss und nicht irgendeine sehr schlüpfrige bidirektionale Datenbindungstechnologie. Deshalb habe ich eine sehr einfache Methode übernommen: Beim Absenden des Formulars den Wert des Formularelements abrufen.

Code kopieren Der Code lautet wie folgt:

$scope.login = function() {
$scope.user = {
Anmelden: $("#login").val(),
Passwort: $("#password").val()
};
...
Gibt false zurück;
};

OK, jetzt gibt es kein Problem mit Firefox, aber was ist mit Chrome?

Chrome fragt den Benutzer nur dann, ob das Passwort gespeichert werden soll, wenn das Formular tatsächlich eine POST-Anfrage initiiert, aber in diesem Fall kann es nicht mit Ajax betrieben werden.

Hier ist die Lösung:

Wenn das Formular eine Post-Anfrage ausgibt, verwenden Sie ng-submit, um sie abzufangen, geben Sie false zurück, um sie zu blockieren, und verwenden Sie Ajax, um die Daten zu übermitteln.
Wenn Ajax erfolgreich zurückkehrt, wird die Sitzung in Cookies gespeichert und das Formular erneut gesendet.
Wenn die Seite neu geladen wird, wird festgestellt, dass sie authentifiziert wurde, und sie wird zur Startseite weitergeleitet.
Dadurch wird die Seite einmal aktualisiert, sie muss jedoch nur beim Anmelden aktualisiert werden. Stellen Sie einfach sicher, dass die Seite an dieselbe Adresse zurückkehrt.
Wenn das Formular jedoch dynamisch zum DOM hinzugefügt wird, funktioniert diese Methode immer noch nicht. Die Lösung besteht darin, ein verstecktes Formular in index.html hinzuzufügen. Wenn Sie Daten übermitteln müssen, kopieren Sie die von anderen Formularen enthaltenen Daten in das versteckte Formular.

Ich habe es in eine Direktive gepackt:

Code kopieren Der Code lautet wie folgt:

app.directive("ngLoginSubmit", function(){
zurück {
einschränken: „A“,
Geltungsbereich: {
onSubmit: „=ngLoginSubmit“
},
Link: function(scope, element, attrs) {
          $(element)[0].onsubmit = function() {
                $("#login-login").val($("#login", element).val());
                 $("#login-password").val($("#password", element).val());

scope.onSubmit(function() {
                           $("#login-form")[0].submit();
            });
              return false;
        };
}
};
});

Verstecktes Formular in index.html:

Code kopieren Der Code lautet wie folgt:

Temporäres Anmeldeformular

Code kopieren Der Code lautet wie folgt:

Controller für die Anmeldung:

Code kopieren Der Code lautet wie folgt:

$scope.login = function(submit) {
$scope.user = {
Anmelden: $("#login").val(),
Passwort: $("#password").val()
};

Funktion ajaxCallback() {
send();
}  

gibt false zurück;
};

Beim Aktualisieren werden Sie gefragt, ob Sie das Formular erneut senden möchten

Jetzt ist dieses Problem gelöst, aber jedes Mal, wenn Sie F5 drücken, erinnert Sie der Browser daran, ob Sie das Formular erneut senden müssen. Das war ein bisschen mühsam, also habe ich eine pre-login.html-Datei hinzugefügt, in der das versteckte Formular Daten übermitteln und dann zu index.html weiterleiten würde.

Jetzt ist alles in Ordnung~