In letzter Zeit haben sich viele Front-End-Studenten darüber beschwert, dass sie ihr Konto nicht aufzeichnen können, selbst wenn sie sich im Anmeldesformular anmelden. Dies ist nach wie vor ein häufiges Problem für einseitige Anwendungen und Webseiten, die mehr AJAX verwenden.
UserApp ist ein WebApp, das mit AngularJS erstellt wurde, konnte jedoch nicht die Funktion "Kennwort speichern" des Browsers unterstützen.
Hier sind einige Probleme gefunden:
Das Formular kann mit JS nicht dynamisch in das DOM eingefügt werden.
Das Formular muss tatsächlich eine Postanfrage ausstellen. (Forminhalte kann nicht abgerufen werden und dann eine Anfrage bei 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, erinnert es nach dem Auslösen des Einreichungsereignisses den Benutzer automatisch daran, ob die Daten aufgezeichnet werden sollen.
Die Codekopie lautet wie folgt:
<form name = "login-form" ng-submit = "login ()">
<input id = "login" name = "login" type = "text" ng-model = "user.login">
<input id = "password" name = "password" type = "password" ng-model = "user.password">
</form>
Die Anforderung, dass Firefox Daten aufzeichnet, ist relativ einfach
Aber Firefox hat ein Problem. Nachdem das Formular automatisch ausgefüllt wurde, 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, da ich nur die Daten bei der Übermittlung des Formulars mitbringen muss, anstatt einige sehr leichtfertige Datenbindungstechnologie. Daher habe ich eine sehr einfache Methode verwendet: Erhalten Sie den Wert des Formularelements beim Senden des Formulars.
Die Codekopie lautet wie folgt:
$ scope.login = function () {
$ scope.user = {
Login: $ ("#login"). Val (),,
Passwort: $ ("#Passwort"). Val ()
};
...
false zurückgeben;
};
Ok, es gibt jetzt kein Problem mit Firefox, aber was soll ich mit Chrome machen?
Chrome fordert den Benutzer nur auf, ob das Kennwort speichert wird, wenn das Formularformular tatsächlich eine Postanforderung initiiert, aber auf diese Weise kann es nicht mit AJAX betrieben werden.
Hier ist die Lösung:
Wenn das Formular eine Postanforderung stellt, fangen Sie es mit NG-Submit ab, geben Sie false zurück, um es zu blockieren, und senden Sie Daten mit AJAX.
Wenn AJAX erfolgreich zurückgibt, speichern Sie die Sitzung in Cookies und steuern Sie das Formular erneut ein.
Wenn die Seite neu geladen wird, werden Sie feststellen, dass sie zertifiziert wurde und auf die Startseite umleiten.
Dadurch wird die Seite einmal aktualisiert, muss jedoch nur beim Anmelden aktualisiert werden. Stellen Sie einfach sicher, dass die Seite an derselben Adresse zurückgibt.
Wenn das Formular jedoch der DOM dynamisch hinzugefügt wird, funktioniert diese Methode immer noch nicht. Die Lösung besteht darin, index.html ein verstecktes Formular hinzuzufügen. Wenn Sie Daten einreichen müssen, kopieren Sie die von anderen Formularen übertragenen Daten in das versteckte Formular.
Ich habe es in eine Richtlinie verpackt:
Die Codekopie lautet wie folgt:
app.directive ("ngloGInsubmit", function () {
zurückkehren {
einschränken: "a",
Umfang: {
OnSubmit: "= ngloginsubmit" "
},
Link: Funktion (Umfang, 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 ();
});
false zurückgeben;
};
}
};
});
Das in index.html versteckte Formular:
Die Codekopie lautet wie folgt:
<form name = "login-form" id = "login-form" method = "post" action = "" style = "display: keine;">
<input name = "login" id = "login-login" type = "text">
<input name = "password" id = "login-password" type = "password">
</form>
Temporäres Anmeldeformular
Die Codekopie lautet wie folgt:
<Formular name = "Login-Form" AutoComplete = "auf" ng-login-submit = "login">
<input id = "login" name = "login" type = "text" autocpromplete = "on">
<input id = "password" name = "password" type = "password" autocplete = "on">
</form>
Controller für die Anmeldung:
Die Codekopie lautet wie folgt:
$ scope.login = function (subieren) {
$ scope.user = {
Login: $ ("#login"). Val (),,
Passwort: $ ("#Passwort"). Val ()
};
Funktion ajaxcallback () {
einreichen();
}
false zurückgeben;
};
Beim Auffrischen wird das Formular erneut angezeigt
Jetzt ist dieses Problem gelöst, aber wenn Sie F5 drücken, erinnert der Browser Sie daran, dass Sie das Formular erneut einsetzen sollen. Dies ist wirklich ein bisschen verdammt, deshalb habe ich eine Pre-Login.html-Datei hinzugefügt, und das versteckte Formular legt die Daten ein und leitet dann auf index.html weiter.
Es ist jetzt in Ordnung ~ ~