web-dev-qa-db-de.com

2019, Chrome 76, Ansatz zur automatischen Vervollständigung aus

Es gibt nur wenige Beiträge dazu. Sie verbringen Stunden damit, jede Antwort durchzugehen, zu testen und Kommentare zu lesen, um festzustellen, dass es keine Lösung gibt. Was haben Sie 2019 getan, Chrome 76, das funktioniert?

13
user2060451

Stand 6. Dezember 2019, mit Chrome v78.x

Standardmethoden wie autocomplete="off" Funktionieren jetzt für die neuesten Versionen von Chrome fast einwandfrei. Außer diesem:

(Chrome's auto-completion list for Manage Addresses

Dieses Ding ist ein echter Mist, weil es nicht nur die Standard-/Nicht-Standardwerte wie "nope" Missachtet, sondern es buchstäblich keine Möglichkeit gibt, dies auszuschalten, es sei denn, die Eingabe ist nicht einmal entfernt mit "verbunden. addressy " Begriffe.

Wie um alles in der Welt könnten wir möglicherweise adressbezogene Eingabefelder anzeigen, ohne adressbezogene Wörter zu verwenden? Hier kommt die einfachste Lösung aller Zeiten.

  • Stellen Sie sicher, dass name und id des Eingabeelements keine adressbezogenen Begriffe enthalten. Attribute wie id="input-street" Oder name="destination-Zip" Sind groß, nein, nein.

  • Dies ist der wichtigste Teil: Wenn Sie für die Texteingabe oder eines der angrenzenden Elemente von Menschen lesbare Adressbegriffe verwenden müssen, fügen Sie das ein "unsichtbares" Nullzeichen (�) zwischen den Buchstaben des genannten Begriffs. Auf diese Weise können wir die KI-Fähigkeit von Chrome] täuschen und das strikte Verhalten bei der automatischen Vervollständigung umgehen.

Einige Arbeitsbeispiele:

<input id="input-stret" placeholder="S&#0;treet" autocomplete="off">

<form action="/action_page.php">
  <label for="product-addres">Product A&#0;ddress</label>
  <input name="addres" id="product-addres" autocomplete="off">
</form>

Und los geht's. Keine lästigen Menüs mehr zum Verwalten von Adressen oder regelmäßige Menüs zur automatischen Vervollständigung.

1
filipvkovic

Deaktivieren der automatischen Füllung: Setzen Sie das Attribut für die automatische Vervollständigung auf einen nicht standardmäßigen Wert, z. "Nee".

Deaktivieren der automatischen Vervollständigung: Die Funktion zur automatischen Vervollständigung speichert Feldnamen und deren Werte, wenn ein Formular gesendet wird. Es gibt (fast, siehe Anmerkung 1) nichts Sinnvolles, um die Speicherung zu verhindern, außer die automatische Vervollständigung auf "off"/"false" zu setzen (siehe warum ). Leider ist dies keine Option, da dies das automatische Ausfüllen ermöglichen würde.

Es ist jedoch möglich, das Abrufen vorheriger Werte zu verhindern, indem "! <Nonce>" an die Feldnamen angehängt wird, wobei <nonce> pro Seitenlade eindeutig ist (wodurch Feldnamen nicht wiederzuerkennen sind).

Auf der Client-Seite kann dies durch die folgende Zeile von Javascript (beim Laden der Seite) erreicht werden:

Array.prototype.slice.call(document.body.getElementsByTagName('INPUT'))
   .forEach(function(elt) { elt.name += '!' + new Date().getTime(); });

Auf der Serverseite beginnt der Teil (falls vorhanden) bei "!" sollte aus Variablennamen entfernt werden (beim Empfang von Post-Variablen).

PS: Diese Antwort ist ein Fehler in meiner früheren Lösung, die sauberer ist, aber nicht ausreichend getestet wurde und - wie Gasman zu Recht betonte - für gewöhnliche Formen nicht funktioniert. Diese neue Lösung wurde auf Chrome Canary 79, getestet, funktioniert, hat relativ geringe Auswirkungen und verschlechtert sich gut. Trotzdem fühle ich mich schuldig, diesen Hack veröffentlicht zu haben, und werde mich noch schuldiger fühlen, wenn ich jemals darauf stoße in realen Formen. Es ist * sehr * schmutzig.

Hinweis 1: Die einzige Möglichkeit, die Speicherung zu verhindern, die sinnvoll macht, besteht darin, das Namensattribut nicht an erster Stelle festzulegen (oder zu deaktivieren) erfordert das Abfangen des Übermittlungsereignisses, um die Daten "manuell" (unter Verwendung von XMLHttpRequest) zu veröffentlichen. Da es sich um Formulare handelt und diese Strategie den traditionellen Formularmechanismus umgeht, habe ich diesen Ansatz nicht näher ausgeführt. Es ist jedoch eine schönere Lösung.


Nachtrag: Ich habe mich entschlossen, Anmerkung 1 weiterzuverfolgen, da ich eine nicht lokalisierte Lösung wirklich nicht mag. Hier ist eine lokalisierte Version in Vanilla JS, die alle Auswirkungen auf einen einzelnen Punkt auf der Clientseite beschränkt. Hängen Sie es als Skript an den Dokumententext an oder fügen Sie es in den Onload-Handler des Dokuments ein.

function disableInputSuggestions(form) { // note: code uses ECMA5 features 
    // Tweak the inputs of form 
    var inputs = Array.prototype.slice.call(form.getElementsByTagName('INPUT'));
    var nonce = Date.now();
    inputs.forEach(function(input, i) { 
        input.autocomplete = 'nope'; // prevent autocomplete
        input.originalName = input.name || input.id; // to not let this code break form handling of inputs without names (browsers fallback to the id in that case)
        input.name = nonce + '_' + i; // prevent autofill (if you're willing to eliminate all input ids first, then clear the name instead)
    });
    // replace the default submit handler by a custom one 
    form.onsubmit = function(ev) {
        // get the form data using the original variable names
        var formData = new FormData();
        inputs.forEach(function(input) { formData.set(input.originalName, input.value); });
        // submit the form data using XMLHttpRequest (alternatively, use a helper form or temporarily undo the tweaks to form) 
        var submitter = new XMLHttpRequest();
        submitter.open(form.getAttribute('method'), form.getAttribute('action'));
        submitter.onreadystatechange = function() {
            if(submitter.readyState == 4 && submitter.status == 200) {
                // handle the server response, here assuming the default form.target = "_self"  
                document.open();
                document.write(submitter.responseText);
                document.close();
            }
        }
        submitter.send(formData);
        return false; // prevent submitting form
    }; 
}
disableInputSuggestions(document.forms.myForm); // assumed: the form has id = myForm
1
Koen AIS

Wie Antwort von Gasman erklärt, müssen sowohl die Funktionen autofill als auch autocomplete deaktiviert sein, was bei einer einzelnen Eingabe nicht möglich zu sein scheint.
Die einzige funktionierende Lösung, die ich gefunden habe, ist das Setzen von autocomplete="off" auf der Eingabe und fügen Sie versteckte gefälschte Eingaben vor der realen Eingabe hinzu, die autofill täuschen, wie folgt:

<input name="Fake_Username" id="Fake_Username" type="text" style="display:none">
<input name="Fake_Password" id="Fake_Password" type="password" style="display:none">
<input name="NameInput" id="NameInput" type="text" autocomplete="off">
1
Lucas