Deaktivieren Sie die automatische Vervollständigung über CSS

Ist es möglich, mithilfe von CSS die automatische Vervollständigung für ein Formularelement (insbesondere ein Textfeld) zu deaktivieren?

Ich verwende eine Tag-Bibliothek, die das Autocomplete-Element nicht zulässt, und möchte die Autocomplete ohne Verwendung von Javascript deaktivieren.

Sie können ein generiertes idund namejedes Mal verwenden, was anders ist, sodass sich der Browser nicht an dieses Textfeld erinnern kann und einige Werte nicht vorschlagen kann.

Dies ist zumindest die browserübergreifende sichere Alternative, aber ich würde empfehlen, die Antwort von RobertsonM ( autocomplete="off") zu verwenden.

Derzeit gibt es in CSS kein Attribut "Autocomplete off". HTML hat jedoch einen einfachen Code dafür:

<input type="text" id="foo" value="bar" autocomplete="off" />

Wenn Sie nach einem Site-weiten Effektor suchen, ist es einfach, einfach eine js-Funktion zu haben, um alle 'Eingaben' zu durchlaufen und dieses Tag hinzuzufügen, oder nach der entsprechenden CSS-Klasse / ID zu suchen.

Das Attribut "Autocomplete" funktioniert in Chrome und Firefox (!) Einwandfrei. Siehe auch " Gibt es eine W3C-gültige Möglichkeit, die Autocomplete in einem HTML-Formular zu deaktivieren?"

Sie können einfach mit jQuery implementieren

$('input').attr('autocomplete','off');

Wenn Sie ein verwenden form, können Sie alle Autovervollständigungen mit deaktivieren.

<form id="Form1" runat="server" autocomplete="off">

CSS verfügt nicht über diese Fähigkeit. Sie müssten clientseitiges Scripting verwenden.

Ich habe alle vorgeschlagenen Möglichkeiten aus diesen Fragen, Antworten und anderen Artikeln im Web ausprobiert, aber trotzdem nicht funktioniert. Ich habe versucht, autocomplete = "new-random-value", autocomplete = "off" im Formularelement zu verwenden, wobei ich das clientseitige Skript wie folgt, jedoch außerhalb von $ (document) .ready () als einen der genannten Benutzer verwendet habe:

$(':input').on('focus', function () {
  $(this).attr('autocomplete', 'off')
});

Ich fand vielleicht eine andere Priorität im Browser, die dieses seltsame Verhalten verursacht! Also habe ich mehr gesucht und schließlich habe ich die folgenden Zeilen dieses guten Artikels noch einmal sorgfältig gelesen :

Aus diesem Grund unterstützen viele moderne Browser autocomplete = "off" für Anmeldefelder nicht:

Wenn eine Site autocomplete = "off" für a setzt und das Formular Eingabefelder für Benutzername und Kennwort enthält, bietet der Browser weiterhin an, sich diese Anmeldung zu merken. Wenn der Benutzer zustimmt, füllt der Browser diese Felder beim nächsten Mal automatisch aus besucht die Seite. Wenn eine Site autocomplete = "off" für Benutzernamen- und Kennwortfelder setzt, bietet der Browser weiterhin an, sich diese Anmeldung zu merken, und wenn der Benutzer zustimmt, füllt der Browser diese Felder beim nächsten Besuch der Seite automatisch aus. Dies ist das Verhalten in Firefox (seit Version 38), Google Chrome (seit 34) und Internet Explorer (seit Version 11).

Wenn Sie eine Benutzerverwaltungsseite definieren, auf der ein Benutzer ein neues Kennwort für eine andere Person angeben kann und daher das automatische Ausfüllen von Kennwortfeldern verhindern möchten, können Sie autocomplete = "new-password" verwenden . Die Unterstützung für diesen Wert wurde in Firefox jedoch nicht implementiert.

Es hat einfach funktioniert. Ich habe es speziell in Chrom versucht und hoffe, dass dies weiterhin funktioniert und anderen hilft.

Ich habe das Problem gelöst, indem ich für alle Eingaben einen falschen Namen für die automatische Vervollständigung hinzugefügt habe.

$("input").attr("autocomplete", "fake-name-disable-autofill");

Dank der Lösung von @ ahhmarr konnte ich das gleiche Problem in meiner Angular + UI-Router- Umgebung lösen , das ich hier für alle Interessierten freigeben werde.

In meinem index.htmlhabe ich folgendes Skript hinzugefügt:

<script type="text/javascript">
    setTimeout(function() {
        $('input').attr('autocomplete', 'off');
    }, 2000);
</script>

Um Statusänderungen abzudecken, habe ich meinem Root-Controller Folgendes hinzugefügt:

$rootScope.$on('$stateChangeStart', function() {
                $timeout(function () {
                    $('input').attr('autocomplete', 'off');
                }, 2000);
            });

Die Zeitüberschreitungen müssen vom HTML-Code gerendert werden, bevor die JQuery angewendet wird.

Wenn Sie eine bessere Lösung finden, lassen Sie es mich bitte wissen.

Sie können CSS nicht verwenden, um die automatische Vervollständigung zu deaktivieren, aber Sie können HTML verwenden:

<input type="text" autocomplete="false" />

Technisch können Sie durch falseeinen ungültigen Wert ersetzen und es wird funktionieren. Dieses iOS ist die einzige Lösung, die ich gefunden habe und die auch in Edge funktioniert.

Es gibt 3 Möglichkeiten, ich erwähne sie, um der bessere Weg zu sein ...

1-HTML-Weg:

<input type="text" autocomplete="false" />

2-Javascript Weg:

document.getElementById("input-id").getAttribute("autocomplete") = "off";

3-jQuery Weg:

$('input').attr('autocomplete','off');

Ich benutze 'new-password'stattdessen nur die 'off'automatische Vervollständigung.

und ich habe auch versucht, diesen Code zu verwenden und funktioniert (zumindest auf meiner Seite), ich verwende WP und GravityForm zu Ihrer Information

$('input').attr('autocomplete','new-password');

$('input').attr('autocomplete','off');