it-swarm.com.de

Deaktivieren Sie die automatische Vervollständigung über CSS

Ist es möglich, CSS zu verwenden, um die automatische Vervollständigung eines Formularelements (insbesondere eines Textfelds) zu deaktivieren?

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

77
David

Sie können jedes Mal eine generierte id und name verwenden, was unterschiedlich ist. Der Browser kann sich also nicht an dieses Textfeld erinnern und schlägt einige Werte nicht vor. 

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

39
codevour

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, können Sie einfach mit einer js-Funktion alle Eingaben durchgehen und dieses Tag hinzufügen oder nach der entsprechenden css-Klasse ID suchen.

Das Autocomplete-Attribut funktioniert einwandfrei in Chrome und Firefox (!), Aber siehe auch/- Gibt es eine gültige W3C-Methode zum Deaktivieren der Autovervollständigung in einem HTML-Formular?

113
RobertsonM

sie können es einfach mit jQuery implementieren

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

Wenn Sie eine form verwenden, können Sie alle Autocompletes mit deaktivieren.

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

CSS verfügt nicht über diese Fähigkeit. Sie müssten clientseitige Skripts verwenden.

12
Sampson

Ich habe alle vorgeschlagenen Wege aus dieser Frage Antworten und anderen Artikeln im Web ausprobiert, funktioniert aber trotzdem nicht. Ich habe autocomplete = "new-random-value", autocomplete = "off" im Formularelement ausprobiert und dabei clientseitiges Skript wie folgt verwendet, jedoch außerhalb von $ (document) .ready () als einem der genannten Benutzer:

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

Ich habe vielleicht eine andere Priorität im Browser gefunden, die dieses seltsame Verhalten verursacht! Also suchte ich mehr und zum Schluss las ich nochmal sorgfältig folgende Zeilen aus diesem guten Artikel :

Aus diesem Grund unterstützen viele moderne Browser keine autocomplete = "off" für Login-Felder:

Wenn für eine Site autocomplete = "off" für a festgelegt ist und das Formular .__ enthält. Benutzernamen und Kennworteingabefelder, dann bietet der Browser weiterhin um sich an diesen Login zu erinnern, und wenn der Benutzer dem zustimmt, wird der Browser Füllen Sie diese Felder beim nächsten Besuch der Seite automatisch aus. Wenn eine site setzt autocomplete = "off" für Felder für Benutzername und Kennwort, Der Browser bietet dann weiterhin an, sich an diesen Login zu erinnern, und wenn Der Benutzer stimmt zu, der Browser füllt diese Felder beim nächsten Aufruf von .__ automatisch aus. Benutzer besucht die Seite. 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 eine .__ angeben kann. neues Passwort für eine andere Person, und Sie möchten Das automatische Ausfüllen von Kennwortfeldern können Sie .__ verwenden. autocomplete = "neues Passwort"; Die Unterstützung für diesen Wert wurde in Firefox jedoch nicht implementiert.

Es hat gerade funktioniert. Ich habe es speziell in Chrome ausprobiert und ich hoffe, dass dies weiterhin funktioniert und anderen hilft.

3
QMaster

Dank @ ahhmarrs - Lösung konnte ich dasselbe Problem in meiner Angular + ui-router - Umgebung lösen, die ich hier für alle Interessierten teilen möchte.

In meinem index.html habe ich folgendes Skript hinzugefügt:

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

Um Statusänderungen abzudecken, habe ich Folgendes in meinen Root-Controller eingefügt:

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

Die Zeitüberschreitungen beziehen sich auf das Rendern der HTML-Datei, bevor die Jquery angewendet wird.

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

1
TrampGuy

Ich habe das Problem durch Hinzufügen eines gefälschten Autovervollständigungsnamens für alle Eingaben gelöst.

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