Gibt es eine W3C-gültige Möglichkeit, die automatische Vervollständigung in einem HTML-Formular zu deaktivieren?

424

xhtml1-transitional.dtdSammeln Sie bei Verwendung des Doctype eine Kreditkartennummer mit dem folgenden HTML-Code

<input type="text" id="cardNumber" name="cardNumber" autocomplete='off'/>

markiert eine Warnung auf dem W3C-Validator:

Es gibt kein Attribut "Autocomplete".

Gibt es eine W3C / Standard-Möglichkeit, die automatische Vervollständigung des Browsers für vertrauliche Felder in einem Formular zu deaktivieren?

html standards forms w3c matt b
quelle
10
Sind Sie sicher, dass Sie mit der Einstellung für die automatische Vervollständigung des Benutzers herumspielen möchten? Wenn sie es eingeschaltet haben, mögen sie es wahrscheinlich. Autocomplete ist eine vollständig browserbasierte Funktion, ähnlich wie die Schaltfläche, mit der der Benutzer die Schriftgröße usw. ändern kann. Sie sollten sich nicht in ihre Wünsche
einmischen
113
Auch für etwas so Sensibles wie Kreditkartennummer? Ich kann mir nicht viele Leute vorstellen, die sich daran erinnern möchten - zumal die automatische Vervollständigung in den meisten Browsern standardmäßig aktiviert ist. Wenn sie möchten, dass es so schlecht in Erinnerung bleibt, können sie etwas verwenden, das Formulare wie die Google-Symbolleiste ausfüllt.
Matt B
13
Mein Anwendungsfall ist etwas anders - ich rolle meine eigene automatische Vervollständigung und möchte nicht, dass sie mit den Browsern kollidiert. Ich habe gerade erst entdeckt, dass autocomplete = "off" ungültig ist, aber es scheint, dass es keine andere einfache Lösung gibt (js zu injizieren ist einfach albern)
thepeer
13
@rmeador, weil wir manchmal eine benutzerfreundlichere Alternative zur Standardbox für automatische Vorschläge anbieten möchten. @corydoras Bitte schieben Sie Ihr OSX-Gewicht nicht herum, es ist nicht hilfreich für die Lösung dieser Frage.
Josh M.
12
Das Problem ist, dass die Banken den Händler haftbar machen, wenn eine betrügerische Transaktion stattgefunden hat ... auch wenn der Kunde zu 100% schuld ist. Daher ist es unter bestimmten Umständen legitim, die Funktion für den Kunden zu deaktivieren.
Alexandre H. Tremblay

Antworten:

421

Hier ist ein guter Artikel aus dem MDC, der die Probleme (und Lösungen) für die automatische Vervollständigung erklärt. Microsoft hat auch hier etwas Ähnliches veröffentlicht .

Um ehrlich zu sein, wenn dies für Ihre Benutzer wichtig ist, erscheint es angemessen, auf diese Weise gegen Standards zu verstoßen. Zum Beispiel verwendet Amazon das Attribut "Autocomplete" ziemlich oft und es scheint gut zu funktionieren.

Wenn Sie die Warnung vollständig entfernen möchten, können Sie das Attribut mit JavaScript auf Browser anwenden, die es unterstützen (IE und Firefox sind die wichtigen Browser) someForm.setAttribute( "autocomplete", "off" ); someFormElm.setAttribute( "autocomplete", "off" );

Wenn Ihre Site HTTPS verwendet, deaktiviert der IE automatisch die automatische Vervollständigung (soweit ich weiß, auch einige andere Browser).

Aktualisieren

Da diese Antwort immer noch einige positive Stimmen erhält, wollte ich nur darauf hinweisen, dass Sie in HTML5 das Attribut 'Autocomplete' für Ihr Formularelement verwenden können. Weitere Informationen finden Sie in der Dokumentation zu W3C.

Nick Presta
quelle
41
Es sieht so aus, als ob Firefox die automatische Vervollständigung unter https nicht deaktiviert, aber das ist ein nützliches Wissen. Vielen Dank!
Matt B
3
Safari berücksichtigt das Attribut autocomplete = "off" nicht. Siehe stackoverflow.com/questions/22817801/…
Skurpi
1
autocompletekann nicht nur für formElemente verwendet werden , und der offWert funktioniert mindestens inchromium-40.0.2214.115
x-yuri
Das w3c scheint die Standards für die automatische Vervollständigung in HTML5.1 zu erweitern (im Entwurf ab diesem Kommentar) w3c.github.io/html/…
Justin Nafe
1
Wenn nichts funktioniert, deaktivieren Sie die automatische Vervollständigung mithilfe des Textbereichs anstelle des Textfelds.
Bsienn
64

Ich wäre sehr überrascht, wenn W3C einen Weg vorgeschlagen hätte, der mit (X) HTML4 funktioniert. Die Autocomplete-Funktion ist vollständig browserbasiert und wurde in den letzten Jahren eingeführt (lange nachdem der HTML4-Standard geschrieben wurde).

Wäre nicht überrascht, wenn HTML5 eine hätte.

Edit: Wie ich dachte, HTML5 macht diese haben Funktion. Um Ihre Seite als HTML5 zu definieren, verwenden Sie den folgenden Doctype (dh: Fügen Sie diesen als allerersten Text in Ihren Quellcode ein). Beachten Sie, dass nicht alle Browser diesen Standard unterstützen, da er noch in Entwurfsform vorliegt.

<!DOCTYPE html>
Henrik Paul
quelle
7
Alle Browser erwarten, dass ältere Versionen von Konqueror dies unterstützen. Sogar IE6 unterstützt es. Es ist der Doctype zu gehen.
BalusC
56

HTML 4 : Nein

HTML 5 : Ja

Das Autocomplete-Attribut ist ein Aufzählungsattribut. Das Attribut hat zwei Zustände. Die auf Keyword - Karten auf den Zustand und die aus Schlüsselwort Karten in dem ausgeschalteten Zustand. Das Attribut kann auch weggelassen werden. Der fehlende Wert Standardwert ist der auf Zustand. Der off - Zustand zeigt an, dass standardmäßig Form Kontrollen in Form ihren autofill Feldnamen Satz haben , werden ausgeschaltet ; Der Status "Ein" gibt an, dass für Feldsteuerelemente im Formular der autofillFeldname standardmäßig auf "Ein" gesetzt ist.

Referenz: W3

RuudKok
quelle
@ freestock.tk Ja, es ist klarer als alle anderen. Einfachheit ist wichtig.
OverCoder
32

Nein, aber die automatische Vervollständigung des Browsers wird häufig dadurch ausgelöst, dass das Feld dasselbe nameAttribut aufweist wie die zuvor ausgefüllten Felder. Wenn Sie einen cleveren Weg finden könnten, um einen zufälligen Feldnamen zu erhalten , könnte die automatische Vervollständigung keine zuvor eingegebenen Werte für das Feld abrufen.

Wenn Sie einem Eingabefeld einen Namen wie " email_<?= randomNumber() ?>" geben und dann das Skript, das diese Datenschleife über die POST- oder GET-Variablen empfängt, nach etwas suchen, das dem Muster " email_[some number]" entspricht, könnten Sie dies abziehen, und dies hätte ( praktisch) garantierter Erfolg, unabhängig vom Browser .

Phantom Watson
quelle
6
Dies würde das automatische Testen erschweren.
David Waters
14
Dies würde das automatische Testen nur erschweren, wenn Ihre Testsoftware nicht nach Feldern suchen / diese lesen kann, an die möglicherweise eine Zufallszahl angehängt ist. Möglicherweise ist es an der Zeit, Ihre automatisierte Testsoftware zu aktualisieren.
Corydoras
8
Die Informationen zur automatischen Vervollständigung würden weiterhin im Datenverzeichnis des Browsers gespeichert, nicht wahr?
Joey Adams
2
Vermutlich. Es ist jedoch nicht zu erwarten, dass der Benutzer jemals wieder auftaucht.
Phantom Watson
1
Chrome verwendet jetzt das Attribut type = "password" anstelle des Namensattributs für eine bestimmte Website. Ich habe name = "newpassword" autocomplete = 'off' type = "password" und es wird automatisch ausgefüllt! Wenn ich den Typ ändere, erfolgt keine automatische Ausfüllung
Enigma Plus
31

Nein, ein guter Artikel ist hier im Mozila Wiki .

Ich würde weiterhin das ungültige verwenden attribute. Ich denke, hier sollte Pragmatismus die Validierung gewinnen.

David Waters
quelle
23

Wie wäre es mit JavaScript?

var e = document.getElementById('cardNumber');
e.autocomplete = 'off'; // Maybe should be false

Es ist nicht perfekt, aber Ihr HTML wird gültig sein.

Greg
quelle
8
Die Verwendung von Javascript als Problemumgehung für Validierungsfehler ist wie das Fegen von Staub unter den Teppich. Während das HTML-Dokument möglicherweise gültig wird, ist die resultierende HTML + JS-Seite nicht gültig.
Fregante
11

Wenn Sie jQuery verwenden, können Sie Folgendes tun:

$(document).ready(function(){$("input.autocompleteOff").attr("autocomplete","off");});

und verwenden Sie die Klasse autocompleteOff, wo Sie möchten:

<input type="text" name="fieldName" id="fieldId" class="firstCSSClass otherCSSClass autocompleteOff" />

Wenn Sie ALLE Ihre Eingaben haben möchten autocomplete=off, können Sie dies einfach verwenden:

$(document).ready(function(){$("input").attr("autocomplete","off");});
Totoche
quelle
4
Nur HTML5-Doctype zu verwenden ist einfacher und besser.
BalusC
5
Dies ist ohnehin kein wirklich gültiger HTML-Code. Es setzt lediglich das (ungültige) autocompleteAttribut auf eine andere Weise als im HTML-Code
matt b
Dieser Code funktioniert bei mir nicht. Ich habe verwendet, $('input.autocompleteOff').val('');was in Ordnung zu sein scheint.
dqd
5
Die Verwendung von Javascript als Problemumgehung für Validierungsfehler ist wie das Fegen von Staub unter den Teppich. Während das HTML-Dokument möglicherweise gültig wird, ist die resultierende HTML + JS-Seite nicht gültig.
Fregante
8

Eine andere Möglichkeit - die auch zur Sicherheit beiträgt - besteht darin, das Eingabefeld bei jeder Anzeige anders aufzurufen: genau wie eine Captha. Auf diese Weise kann die Sitzung die einmalige Eingabe lesen und die automatische Vervollständigung hat nichts zu tun.

Nur ein Punkt in Bezug auf die Frage von rmeador, ob Sie die Browser-Erfahrung beeinträchtigen sollten: Wir entwickeln Kontaktmanagement- und CRM-Systeme, und wenn Sie die Daten anderer Personen in ein Formular eingeben, möchten Sie nicht, dass diese ständig Ihre eigenen Details vorschlagen.

Dies funktioniert für unsere Bedürfnisse, aber dann haben wir den Luxus, den Benutzern zu sagen, dass sie einen anständigen Browser bekommen sollen :)

autocomplete='off'
Enigma Plus
quelle
8

autocomplete="off" Dies sollte das Problem für alle modernen Browser beheben.

<form name="form1" id="form1" method="post" autocomplete="off"
   action="http://www.example.com/form.cgi">
  [...]
</form>

In aktuellen Versionen von Gecko-Browsern funktioniert das Autocomplete-Attribut einwandfrei. Bei früheren Versionen, die auf Netscape 6.2 zurückgingen, funktionierte dies mit Ausnahme von Formularen mit "Adresse" und "Name".

Aktualisieren

In einigen Fällen schlägt der Browser weiterhin Werte für die automatische Vervollständigung vor, auch wenn das Attribut für die automatische Vervollständigung deaktiviert ist. Dieses unerwartete Verhalten kann für Entwickler ziemlich rätselhaft sein. Der Trick, um die Nicht-Autovervollständigung wirklich zu erzwingen, besteht darin , dem Attribut eine zufällige Zeichenfolge zuzuweisen , zum Beispiel:

autocomplete="nope"

Da dieser Zufallswert kein a ist valid one, gibt der Browser auf.

Dokumentation

Emilio Gort
quelle
Moderne Browser respektieren Autocomplete = off nicht nach Wahl. :/ Unglücklicherweise.
Alexus
@Alexus hat ein Update hinzugefügt ... Internet-Änderung sehr schnell
Emilio Gort
6

Die Verwendung eines zufälligen Namensattributs funktioniert bei mir.

Ich habe das Namensattribut beim Senden des Formulars zurückgesetzt, damit Sie beim Senden des Formulars weiterhin über den Namen darauf zugreifen können. (Verwenden des ID-Attributs zum Speichern des Namens)

opznhaarlems
quelle
5

Beachten Sie, dass die Position des Attributs für die automatische Vervollständigung verwirrend ist. Es kann entweder auf das gesamte FORM-Tag oder auf einzelne INPUT-Tags angewendet werden, und dies war vor HTML5 nicht wirklich standardisiert (dies erlaubt explizit beide Speicherorte ). In älteren Dokumenten wird in diesem Mozilla-Artikel nur das FORM-Tag erwähnt. Gleichzeitig suchen einige Sicherheitsscanner nur im INPUT-Tag nach Autocomplete und beschweren sich, wenn es fehlt (auch wenn es sich im übergeordneten FORMULAR befindet). Eine detailliertere Analyse dieses Durcheinanders finden Sie hier: Verwirrung über AUTOCOMPLETE = OFF-Attribute in HTML-Formularen .

Kravietz
quelle
3

Nicht ideal, aber Sie können die ID und den Namen des Textfelds jedes Mal ändern, wenn Sie es rendern. Sie müssen es auch serverseitig verfolgen, damit Sie die Daten herausholen können.

Nicht sicher, ob dies funktionieren wird oder nicht, war nur ein Gedanke.

Kieron
quelle
2

Ich denke, es gibt einen einfacheren Weg. Erstellen Sie eine versteckte Eingabe mit einem zufälligen Namen (über Javascript) und setzen Sie den Benutzernamen darauf. Wiederholen Sie mit dem Passwort. Auf diese Weise weiß Ihr Backend-Skript genau, wie der entsprechende Feldname lautet, während die automatische Vervollständigung im Dunkeln bleibt.

Ich liege wahrscheinlich falsch, aber es ist nur eine Idee.

Schlangen und Kaffee
quelle
2 
if (document.getElementsByTagName) {
    var inputElements = document.getElementsByTagName("input");
    for (i=0; inputElements[i]; i++) {
        if (inputElements[i].className && (inputElements[i].className.indexOf("disableAutoComplete") != -1)) {
            inputElements[i].setAttribute("autocomplete","off");
        }
    }
}
Jack Tuck
quelle
-1

Diese Lösung funktioniert bei mir:

$('form,input,select,textarea').attr("autocomplete", "nope");

Wenn Sie das automatische Ausfüllen in dieser Region verwenden möchten, fügen Sie das autocomplete="false"Element hinzu, z.

<input id="search" name="search" type="text" placeholder="Name or Code" autcomplete="false">
Hưng Trịnh
quelle
-5

Gültige automatische Vervollständigung aus

<script type="text/javascript">
    /* <![CDATA[ */
    document.write('<input type="text" id="cardNumber" name="cardNumber" autocom'+'plete="off"/>');
    /* ]]> */ 
</script>
Southampton Webdesign
quelle
13
Wenn ein Benutzer JS ausgeschaltet hat, kann er eine Bestellung nicht abschließen, da er seine Kartennummer nicht eingeben kann. Besser, das Attribut über JS zu ergänzen Ich würde sagen - im schlimmsten Fall gibt JS off dem Kartennummernfeld das Potenzial für eine automatische Vervollständigung, aber zumindest können sie eine Bestellung
aufgeben
3
Das ist nicht mal lustig.
Ricardo Pieper