it-swarm.com.de

Chrome AutoFill deaktivieren

Ich habe Probleme mit dem automatischen Ausfüllen von chrome in verschiedenen Formularen.

Die Felder im Formular haben alle sehr gebräuchliche und genaue Namen, wie "E-Mail", "Name" oder "Passwort", und sie haben auch autocomplete="off" gesetzt.

Das Autocomplete-Flag hat das Autocomplete-Verhalten erfolgreich deaktiviert. Während der Eingabe wird ein Dropdown-Menü mit Werten angezeigt. Die Werte, unter denen Chrome die Felder automatisch ausfüllt, wurden jedoch nicht geändert.

Dieses Verhalten ist in Ordnung, mit der Ausnahme, dass chrome die Eingaben falsch ausfüllt, z. B. die Telefoneingabe mit einer E-Mail-Adresse ausfüllt. Kunden haben sich darüber beschwert, und es hat sich herausgestellt, dass dies in mehreren Fällen vorkommt und nicht als Ergebnis eines Vorgangs, den ich lokal auf meinem Computer ausgeführt habe.

Die einzige aktuelle Lösung, die ich mir vorstellen kann, ist, benutzerdefinierte Eingabenamen dynamisch zu generieren und dann die Werte im Backend zu extrahieren. Dies scheint jedoch ein ziemlich hackiger Weg zu sein, um dieses Problem zu umgehen. Gibt es Tags oder Macken, die das Verhalten beim automatischen Ausfüllen ändern und zur Behebung dieses Problems verwendet werden könnten?

620
templaedhel

Für neue Chrome Versionen können Sie autocomplete="new-password" einfach in Ihr Passwortfeld eingeben und fertig. Ich habe es überprüft, funktioniert gut.

Habe diesen Tipp von Chrome Entwicklern in dieser Diskussion erhalten: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

P.S. Vergessen Sie nicht, eindeutige Namen für verschiedene Felder zu verwenden, um ein automatisches Ausfüllen zu verhindern.

783
tibalt

Ich habe gerade herausgefunden, dass die aktuelle Version von Chrome Ihren Benutzernamen/Ihre E-Mail-Adresse automatisch in das Feld vor eingibt, wenn Sie einen Benutzernamen und ein Passwort für eine Website gespeichert haben. irgendein type=password Feld. Es ist egal, wie das Feld heißt - es wird nur angenommen, dass das Feld vor dem Kennwort als Benutzername verwendet wird.

Alte Lösung

Verwenden Sie einfach <form autocomplete="off"> und verhindern Sie das Vorfüllen von Passwörtern sowie das heuristische Füllen von Feldern auf der Grundlage von Annahmen, die ein Browser möglicherweise macht (die oft falsch sind). Im Gegensatz zur Verwendung von <input autocomplete="off">, das vom automatischen Ausfüllen des Kennworts anscheinend ignoriert wird (in Chrome wird es also von Firefox befolgt).

aktualisierte Lösung

Chrome ignoriert jetzt <form autocomplete="off">. Daher ist meine ursprüngliche Problemumgehung (die ich gelöscht hatte) jetzt der letzte Schrei.

Erstellen Sie einfach ein paar Felder und machen Sie sie mit "display: none" ausgeblendet. Beispiel:

<!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>

Dann legen Sie Ihre echten Felder darunter.

Denken Sie daran, den Kommentar hinzuzufügen, oder andere Personen in Ihrem Team werden sich fragen, was Sie tun!

pdate März 2016

Gerade mit dem neuesten Chrome getestet - alles gut. Dies ist eine ziemlich alte Antwort, aber ich möchte nur erwähnen, dass unser Team sie seit Jahren bei Dutzenden von Projekten einsetzt. Trotz einiger Kommentare unten funktioniert es immer noch hervorragend. Es gibt keine Probleme mit der Erreichbarkeit, da die Felder display:none sind, was bedeutet, dass sie nicht den Fokus erhalten. Wie bereits erwähnt, müssen Sie sie vor Ihre realen Felder setzen.

Wenn Sie Javascript verwenden, um Ihr Formular zu ändern, benötigen Sie einen zusätzlichen Trick. Zeigen Sie die gefälschten Felder an, während Sie das Formular bearbeiten, und blenden Sie sie Millisekunden später wieder aus.

Beispielcode mit jQuery (vorausgesetzt, Sie geben Ihren gefälschten Feldern eine Klasse):

        $(".fake-autofill-fields").show();
        // some DOM manipulation/ajax here
        window.setTimeout(function () {
            $(".fake-autofill-fields").hide();
        },1);

pdate Juli 2018

Meine Lösung funktioniert nicht mehr so ​​gut, da die Anti-Usability-Experten von Chrome hart gearbeitet haben. Aber sie haben uns einen Knochen in Form von geworfen:

<input type="password" name="whatever" autocomplete="new-password" />

Das funktioniert und löst meistens das Problem.

Es funktioniert jedoch nicht, wenn Sie kein Kennwortfeld, sondern nur eine E-Mail-Adresse haben. Das kann auch schwierig sein, damit es aufhört, gelb zu werden und vorzufüllen. Die Fake Fields-Lösung kann verwendet werden, um dies zu beheben.

Tatsächlich müssen Sie manchmal in zwei Lose gefälschte Felder fallen und sie an verschiedenen Orten versuchen. Zum Beispiel hatte ich am Anfang meines Formulars bereits falsche Felder, aber Chrome hat kürzlich damit begonnen, mein Feld "E-Mail" erneut auszufüllen. Also habe ich mich verdoppelt und weitere falsche Felder direkt vor der "E-Mail" eingefügt. Feld, und das hat es behoben. Wenn Sie entweder das erste oder das zweite Los der Felder entfernen, wird die falsche übereifrige automatische Ausfüllung wiederhergestellt.

622
mike nelson

Nach monatelangen Kämpfen habe ich festgestellt, dass die Lösung viel einfacher ist, als Sie sich vorstellen können:

Anstelle von _autocomplete="off"_ verwenden Sie autocomplete="false";)

So einfach ist das und es funktioniert auch in Google Chrome wie ein Zauber!

218
Kaszoni Ferencz

Manchmal verhindert auch autocomplete=off nicht, dass Anmeldeinformationen in falsche Felder eingegeben werden.

Eine Problemumgehung besteht darin, das automatische Ausfüllen des Browsers im schreibgeschützten Modus zu deaktivieren und den Fokus auf beschreibbar zu setzen:

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

Das Ereignis focus tritt bei Mausklicks und beim Blättern durch Felder auf.

Aktualisieren:

Mobile Safari setzt den Cursor in das Feld, zeigt jedoch keine virtuelle Tastatur an. Diese neue Problemumgehung funktioniert wie zuvor, behandelt jedoch die virtuelle Tastatur:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

Live Demo https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

Erläuterung: Der Browser füllt die Anmeldeinformationen automatisch in das falsche Textfeld ein.

füllen Sie die Eingaben falsch aus, z. B. indem Sie die Telefoneingabe mit einer E-Mail-Adresse füllen

Manchmal bemerke ich dieses seltsame Verhalten bei Chrome und Safari, wenn Passwortfelder in der gleichen Form vorliegen. Ich vermute, der Browser sucht nach einem Passwortfeld um Geben Sie Ihre gespeicherten Anmeldeinformationen ein. Dann füllt es automatisch den Benutzernamen in das nächste textähnliche Eingabefeld, das vor dem Passwortfeld in DOM erscheint (nur wegen Beobachtung erraten). Da der Browser die letzte Instanz ist und Sie ihn nicht steuern können,

Dieses Readonly-Fix ​​oben hat bei mir funktioniert.

102
dsuess

Wenn Sie eine Suchfeldfunktion implementieren, setzen Sie das Attribut type wie folgt auf search:

<input type="search" autocomplete="off" />

Dies funktioniert für mich in Chrome v48 und scheint ein legitimes Markup zu sein:

https://www.w3.org/wiki/HTML/Elements/input/search

63
dana

Versuche dies. Ich weiß, die Frage ist etwas alt, aber dies ist ein anderer Ansatz für das Problem.

Mir ist auch aufgefallen, dass das Problem direkt über dem Feld password liegt.

Ich habe beide Methoden gerne ausprobiert

<form autocomplete="off"> und <input autocomplete="off">, aber keiner von ihnen hat für mich gearbeitet.

Also habe ich das Problem mit dem folgenden Snippet behoben - nur ein weiteres Textfeld über dem Feld für den Kennworttyp hinzugefügt und es zu display:none gemacht.

Etwas wie das:

<input type="text" name="prevent_autofill" id="prevent_autofill" value="" style="display:none;" />
<input type="password" name="password_fake" id="password_fake" value="" style="display:none;" />
<input type="password" name="password" id="password" value="" />

Hoffe, es wird jemandem helfen.

62
Jobin Jose

Ich weiß nicht warum, aber das hat mir geholfen und funktioniert.

<input type="password" name="pwd" autocomplete="new-password">

Ich habe keine Ahnung warum, aber autocompelete = "new-password" deaktiviert das automatische Ausfüllen. Es funktionierte in der neuesten 49.0.2623.112 chrome Version.

45
Tauras

Für mich einfach

<form autocomplete="off" role="presentation">

Erledigt.

Getestet mit mehreren Versionen, letzter Versuch war am 56.0.2924.87

44
Kuf

Sie müssen dieses Attribut hinzufügen:

autocomplete="new-password"

Quelllink: Vollständiger Artikel

22
Hitesh Kalwani

Es ist so einfach und knifflig :)

google chrome sucht grundsätzlich nach jedem ersten sichtbaren Passwortelement innerhalb der Tags <form>, <body> und <iframe>, um die automatische Auffüllung für sie zu aktivieren. Um dies zu deaktivieren, müssen Sie ein Dummy-Kennwortelement wie folgt hinzufügen:

    • wenn sich Ihr Kennwortelement in einem Tag <form> befindet, müssen Sie das Dummy-Element unmittelbar nach dem Tag <form> open als erstes Element in Ihrem Formular einfügen

    • wenn Ihr Kennwortelement nicht in einem <form> -Tag enthalten ist, setzen Sie das Dummy-Element unmittelbar nach dem <body> -Tag in Ihre HTML-Seite

  1. Sie müssen das Dummy-Element ausblenden, ohne css display:none zu verwenden. Verwenden Sie daher grundsätzlich Folgendes als Dummy-Kennwortelement.

    <input type="password" style="width: 0;height: 0; visibility: hidden;position:absolute;left:0;top:0;"/>
    
19

Hier sind meine Lösungsvorschläge, da Google darauf besteht, jede Umgehung zu überschreiben, die die Leute anscheinend machen.

Option 1 - Wählen Sie den gesamten Text beim Klicken aus

Legen Sie die Werte der Eingaben auf ein Beispiel für Ihren Benutzer (z. B. [email protected]) oder die Beschriftung des Felds (z. B. Email) fest, und fügen Sie Ihren Eingaben eine Klasse mit dem Namen focus-select hinzu:

<input type="text" name="email" class="focus-select" value="[email protected]">
<input type="password" name="password" class="focus-select" value="password">

Und hier ist die jQuery:

$(document).on('click', '.focus-select', function(){
  $(this).select();
});

Ich kann wirklich nicht sehen, dass Chrome jemals mit Werten herumspielt. Das wäre verrückt. Hoffentlich ist dies eine sichere Lösung.

Option 2 - Setzen Sie den E-Mail-Wert auf ein Leerzeichen und löschen Sie ihn

Angenommen, Sie haben zwei Eingaben, z. B. E-Mail und Kennwort, setzen Sie den Wert des E-Mail-Felds auf " " (ein Leerzeichen) und fügen Sie das Attribut/den Wert autocomplete="off" hinzu. Deaktivieren Sie dies dann mit JavaScript. Sie können den Passwortwert leer lassen.

Wenn der Benutzer aus irgendeinem Grund kein JavaScript hat, stellen Sie sicher, dass Sie die Eingabe serverseitig zuschneiden (das sollten Sie wahrscheinlich sowieso tun), falls er den Speicherplatz nicht löscht.

Hier ist die jQuery:

$(document).ready(function() {
  setTimeout(function(){
    $('[autocomplete=off]').val('');
  }, 15);
});

Ich habe eine Zeitüberschreitung auf 15 festgelegt, da 5 bei meinen Tests gelegentlich zu funktionieren schien. Daher scheint das Verdreifachen dieser Zahl eine sichere Sache zu sein.

Wenn der Anfangswert nicht auf ein Leerzeichen gesetzt wird, bleibt die Eingabe in Chrome gelb, als ob sie automatisch ausgefüllt worden wäre.

Option 3 - versteckte Eingänge

Fügen Sie dies am Anfang des Formulars ein:

<!-- Avoid Chrome autofill -->
<input name="email" class="hide">

CSS:

.hide{ display:none; }

Stellen Sie sicher, dass Sie die HTML-Notiz behalten, damit Ihre anderen Entwickler sie nicht löschen! Stellen Sie außerdem sicher, dass der Name der ausgeblendeten Eingabe relevant ist.

17
rybo111

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 verwirrend sein. Der Trick, um die automatische Vervollständigung wirklich zu erzwingen, ist m dem Attribut eine zufällige Zeichenfolge zuzuweisen, zum Beispiel:

autocomplete="nope"
14

Ich habe festgestellt, dass das Hinzufügen dieses Elements zu einem Formular die Verwendung von AutoFill durch Chrome verhindert.

<div style="display: none;">
    <input type="text" id="PreventChromeAutocomplete" name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>

Hier gefunden. https://code.google.com/p/chromium/issues/detail?id=468153#hc41

Wirklich enttäuschend, dass Chrome entschieden hat, dass es besser als der Entwickler weiß, wann Autocomplete durchzuführen ist. Hat ein echtes Microsoft-Feeling.

12
Rob Jensen
<input readonly onfocus="this.removeAttribute('readonly');" type="text">

das Hinzufügen eines schreibgeschützten Attributs zum Tag zusammen mit dem Entfernen des OnFocus-Ereignisses behebt das Problem

11
Avindu Hewa

Bei Benutzernamen-Kennwortkombinationen ist dies ein leicht zu lösendes Problem. Chrome Heuristik sucht nach dem Muster:

<input type="text">

gefolgt von:

<input type="password">

Brechen Sie diesen Vorgang einfach ab, indem Sie Folgendes ungültig machen:

<input type="text">
<input type="text" onfocus="this.type='password'">
9
Bernesto

Verwenden Sie css Textsicherheit: disc, ohne type = password zu verwenden.

html

<input type='text' name='user' autocomplete='off' />
<input type='text' name='pass' autocomplete='off' class='secure' />

or

<form autocomplete='off'>
    <input type='text' name='user' />
    <input type='text' name='pass' class='secure' />
</form>

cSS

input.secure {
    text-security: disc;
    -webkit-text-security: disc;
}
8
Stiffels

Die von Mike Nelsons bereitgestellte Lösung funktionierte in Chrome 50.0.2661.102 m nicht. Durch einfaches Hinzufügen eines Eingabeelements desselben Typs mit Anzeige wird die automatische Vervollständigung des nativen Browsers nicht mehr deaktiviert. Es ist nun erforderlich, das Namensattribut des Eingabefelds zu duplizieren, für das Sie die automatische Vervollständigung deaktivieren möchten.

Um zu vermeiden, dass das Eingabefeld dupliziert wird, wenn es sich in einem Formularelement befindet, sollten Sie ein deaktiviertes Element in das Element einfügen, das nicht angezeigt wird. Dadurch wird verhindert, dass dieses Element als Teil der Formularaktion gesendet wird.

<input name="dpart" disabled="disabled" type="password" style="display:none;">
<input name="dpart" type="password">
<input type="submit">
8
mccainz

2016 hat Google Chrome damit begonnen, autocomplete=off zu ignorieren, obwohl es sich in W3C befindet. Die Antwort, die sie gepostet haben :

Das Knifflige dabei ist, dass irgendwann auf dem Weg des Web Autocomplete = off für viele Formularfelder zur Standardeinstellung wird, ohne dass wirklich darüber nachgedacht wird, ob dies für die Benutzer gut ist oder nicht. Dies bedeutet nicht, dass es keine sehr gültigen Fälle gibt, in denen die Daten des Browsers nicht automatisch ausgefüllt werden sollen (z. B. auf CRM-Systemen). Im Großen und Ganzen werden diese Fälle jedoch als Minderheitenfälle angesehen. Infolgedessen haben wir angefangen, autocomplete = off für Chrome Autofill-Daten zu ignorieren.

Was im Wesentlichen sagt: Wir wissen besser, was ein Benutzer will.

Sie haben einen weiteren Bug geöffnet, um gültige Use Cases zu veröffentlichen, wenn Autocomplete = off erforderlich ist

Ich habe in meiner gesamten B2B-Anwendung keine Probleme mit der automatischen Vervollständigung festgestellt, sondern nur bei der Eingabe eines Kennworttyps.

Das automatische Ausfüllen greift ein, wenn auf dem Bildschirm ein Kennwortfeld angezeigt wird, auch wenn dieses ausgeblendet ist. Um diese Logik zu unterbrechen, können Sie jedes Kennwortfeld in eine eigene Form bringen, wenn es nicht Ihre eigene Seitenlogik unterbricht.

<input type=name >

<form>
    <input type=password >
</form>
7
norekhov

Wenn Sie Probleme haben, Platzhalter beizubehalten, aber das automatische Ausfüllen von chrome deaktivieren, habe ich diese Problemumgehung gefunden.

Problem

HTML

<div class="form">
    <input type="text" placeholder="name"><br>
    <input type="text" placeholder="email"><br>
    <input type="text" placeholder="street"><br>
</div>

http://jsfiddle.net/xmbvwfs6/1/

Das obige Beispiel erzeugt immer noch das Problem des automatischen Ausfüllens, aber wenn Sie den required="required" und etwas CSS verwenden, können Sie die Platzhalter replizieren und Chrome nimmt die Tags nicht auf.

Lösung

HTML

<div class="form">
    <input type="text" required="required">
    <label>Name</label>  
    <br>
    <input type="text" required="required">
    <label>Email</label>    
    <br>
    <input type="text" required="required">
    <label>Street</label>    
    <br>
</div>

CSS

input {
    margin-bottom: 10px;
    width: 200px;
    height: 20px;
    padding: 0 10px;
    font-size: 14px;
}
input + label {
    position: relative;
    left: -216px;
    color: #999;
    font-size: 14px;
}
input:invalid + label { 
    display: inline-block; 
}
input:valid + label { 
    display: none; 
}

http://jsfiddle.net/mwshpx1o/1/

7
Ryan Grush

Zuvor eingegebene Werte, die von chrome zwischengespeichert wurden, werden als Dropdown-Auswahlliste angezeigt. Diese Option kann deaktiviert werden, indem in den erweiterten Einstellungen von chrome die explizit gespeicherte Adresse deaktiviert wird, wenn ein Adressfeld abgerufen wird Dies kann durch Autocomplete = "false" deaktiviert werden. Es wird jedoch chrome erlauben, zwischengespeicherte Werte in Dropdown anzuzeigen.

Bei einem folgenden HTML-Eingabefeld werden beide deaktiviert.

Role="presentation" & autocomplete="off"

Bei der Auswahl der Eingabefelder für das automatische Ausfüllen von Adressen ignoriert Chrome die Eingabefelder, die kein vorangestelltes HTML-Element haben.

Um sicherzustellen, dass der Parser chrome ein Eingabefeld für das Popup-Fenster zum automatischen Ausfüllen von Adressen ignoriert, kann eine versteckte Schaltfläche oder ein Bildsteuerelement zwischen Etikett und Textfeld hinzugefügt werden. Dies unterbricht die chrome -Parsing-Sequenz der Label-Input-Pair-Erstellung für das automatische Ausfüllen. Kontrollkästchen werden beim Parsen nach Adressfeldern ignoriert

Chrome berücksichtigt auch das Attribut "for" für das Beschriftungselement. Es kann verwendet werden, um die Parsing-Sequenz von Chrome zu unterbrechen.

6
Momin

Wenn Sie autocomplete auf off setzen, sollte dies hier funktionieren. Ich habe ein Beispiel, das von Google auf der Suchseite verwendet wird. Ich habe das von inspect element gefunden.

enter image description here

edit : Falls off nicht funktioniert, versuchen Sie false oder nofill. In meinem Fall funktioniert es mit chrome Version 48.0

6
mumair

Nun, da wir alle dieses Problem haben, habe ich einige Zeit investiert, um eine funktionierende jQuery-Erweiterung für dieses Problem zu schreiben. Google muss HTML-Markup folgen, nicht wir folgen Google

(function ($) {

"use strict";

$.fn.autoCompleteFix = function(opt) {
    var ro = 'readonly', settings = $.extend({
        attribute : 'autocomplete',
        trigger : {
            disable : ["off"],
            enable : ["on"]
        },
        focus : function() {
            $(this).removeAttr(ro);
        },
        force : false
    }, opt);

    $(this).each(function(i, el) {
        el = $(el);

        if(el.is('form')) {
            var force = (-1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable))
            el.find('input').autoCompleteFix({force:force});
        } else {
            var disabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.disable);
            var enabled = -1 !== $.inArray(el.attr(settings.attribute), settings.trigger.enable);
            if (settings.force && !enabled || disabled)
                el.attr(ro, ro).focus(settings.focus).val("");
        }
    });
};
})(jQuery);

Fügen Sie dies einfach einer Datei wie /js/jquery.extends.js hinzu und fügen Sie es nach jQuery ein. Wenden Sie es beim Laden des Dokuments auf jedes Formularelement wie folgt an:

$(function() {
    $('form').autoCompleteFix();
});

Geige mit Tests

6
MagicSux

Ich mochte es wirklich nicht, versteckte Felder zu machen, ich denke, dass es sehr schnell verwirrend wird, wenn ich es so mache.

In den Eingabefeldern, die Sie von der automatischen Vervollständigung ausschließen möchten, funktioniert dies. Stellen Sie sicher, dass die Felder schreibgeschützt sind und entfernen Sie dieses Attribut wie folgt

<input readonly onfocus="this.removeAttribute('readonly');" type="text">

dazu müssen Sie zuerst das schreibgeschütztes Attribut entfernen, indem Sie das Feld auswählen. In diesem Fall werden Sie höchstwahrscheinlich mit Ihrer eigenen Benutzereingabe ausgefüllt und das automatische Ausfüllung gebeugt übernehmen

6
MZaragoza

Das sind zwei Teile. Chrome und andere Browser speichern zuvor eingegebene Werte für Feldnamen und stellen dem Benutzer eine automatische Vervollständigungsliste zur Verfügung, die darauf basiert (insbesondere, Eingaben vom Typ Kennwort sind nie auf diese Weise erinnert, aus ziemlich offensichtlichen Gründen). Sie können autocomplete="off" hinzufügen, um dies in Dingen wie Ihrem E-Mail-Feld zu verhindern.

Sie haben dann jedoch Passwort-Füllungen. Die meisten Browser haben ihre eigenen integrierten Implementierungen und es gibt auch viele Dienstprogramme von Drittanbietern, die diese Funktionalität bereitstellen. Dies können Sie nicht stoppen. Dies ist der Benutzer, der selbst die Wahl trifft, diese Informationen zu speichern, um sie später automatisch auszufüllen. Sie liegen vollständig außerhalb des Umfangs und des Einflussbereichs Ihrer Anwendung.

6
Chris Pratt

Andere Lösung, Webkit-basiert. Wie bereits erwähnt, wird die E-Mail jedes Mal automatisch vervollständigt, wenn Chrome ein Kennwortfeld findet. AFAIK, dies ist unabhängig von Autocomplete = [was auch immer].

Um dies zu umgehen, ändern Sie den Eingabetyp in Text und wenden Sie die Webkit-Sicherheitsschriftart in der gewünschten Form an.

.secure-font{
-webkit-text-security:disc;}

<input type ="text" class="secure-font">

Soweit ich sehen kann, ist dies mindestens so sicher wie die Eingabe type = password, es ist copy and paste sicher. Es ist jedoch anfällig, wenn der Stil entfernt wird, durch den die Sternchen entfernt werden. Natürlich kann Eingabetyp = Kennwort einfach in Eingabetyp = Text in der Konsole geändert werden, um automatisch ausgefüllte Kennwörter anzuzeigen.

5
Michael.

Gemäß Chromium-Fehlerbericht Nr. 352347 Chrome respektiert nicht mehr autocomplete="off|false|anythingelse", weder auf Formularen noch auf Eingaben.

Die einzige Lösung, die für mich funktioniert hat, war, ein Dummy-Passwortfeld hinzuzufügen :

<input type="password" class="hidden" />
<input type="password" />

Hier ist ein schmutziger Hack -

Sie haben Ihr Element hier (Hinzufügen des deaktivierten Attributs):

<input type="text" name="test" id="test" disabled="disabled" />

Und dann am Ende Ihrer Webseite etwas JavaScript einfügen:

<script>
    setTimeout(function(){
        document.getElementById('test').removeAttribute("disabled");
        },100);
</script>
5
hyper_st8

Versuchen Sie den folgenden jQuery Code, der für mich funktioniert hat.

if ($.browser.webkit) {
    $('input[name="password"]').attr('autocomplete', 'off');
    $('input[name="email"]').attr('autocomplete', 'off');
}
5
Priyanka

Anstelle von "das hat bei mir geklappt" und anderen Antworten, die wie vollständige Hacks aussehen ... So werden derzeit chrome (und die neueste Spezifikation) die autocomplete -Attribute auf Ihrem Computer behandelt input Elemente:

https://developers.google.com/web/fundamentals/design-and-ui/input/forms/label-and-name-inputs?hl=de

TLDR: Fügen Sie autocomplete='<value>' zu Ihren Eingaben hinzu, wobei <value> eine beliebige Zeichenfolge sein sollte, die definiert, wozu das Feld dient. Dies funktioniert ähnlich wie das Attribut name. Verwenden Sie nach Möglichkeit die im obigen Link angegebenen Werte.

Entfernen Sie außerdem das Autocomplete-Attribut aus Ihrem Formular

4
Deminetix

Der einzige Weg, der für mich funktioniert, war: (jQuery erforderlich)

$(document).ready(function(e) {
    if ($.browser.webkit) {
        $('#input_id').val(' ').val('');
    }
});
4
user3638028

Ich habe das gleiche Problem konfrontiert. Und hier ist die Lösung zum Deaktivieren der automatischen Eingabe von Benutzername und Passwort in Chrome (nur mit Chrome getestet)

    <!-- Just add this hidden field before password as a charmed solution to prevent auto-fill of browser on remembered password -->
    <input type="tel" hidden />
    <input type="password" ng-minlength="8" ng-maxlength="30" ng-model="user.password" name="password" class="form-control" required placeholder="Input password">
4
hitman

versuche es mit einem Leerzeichen im Wert:

<input type="email" name="email" value="&nbsp;">
<input type="password" name="password" value="&nbsp;">

chrom 54.0.2840.59

3
Isaac Limón

Die neueste Lösung zum Hinzufügen von autocomplete="new-password" zum Kennwortfeld verhindert, dass Chrome es automatisch ausfüllt.

Wie sibbl jedoch betonte, hindert dies Chrome nicht daran, Sie aufzufordern, das Kennwort zu speichern, nachdem das Absenden des Formulars abgeschlossen ist. Ab Chrome 51.0.2704.106 habe ich festgestellt, dass Sie dies erreichen können, indem Sie ein unsichtbares Dummy-Kennwortfeld hinzufügen, das auch das Attribut autocomplete="new-password" enthält. Beachten Sie, dass "display: none" in diesem Fall nicht funktioniert. z.B. Fügen Sie so etwas vor das Feld für das echte Passwort ein:

<input type="password" autocomplete="new-password" 
style="visibility:hidden;height:0;width:1px;position:absolute;left:0;top:0">`

Dies hat nur bei mir funktioniert, wenn ich die Breite auf einen Wert ungleich Null eingestellt habe. Danke an tibalt und fareed namrouti für die originalen Antworten.

2
CodeSimian

Meine Problemumgehung, da keine der oben genannten Funktionen in Chrome 63 und darüber hinaus zu funktionieren scheint

Ich habe dies auf meiner Site behoben, indem ich das anstößige Eingabeelement durch ersetzt habe

<p class="input" contenteditable="true">&nbsp;</p>

und Verwenden von jQuery zum Auffüllen eines ausgeblendeten Felds vor der Übermittlung.

Aber dies ist ein wirklich schrecklicher Hack, der durch eine schlechte Entscheidung bei Chromium notwendig wurde.

2
lufc

Ich habe endlich Erfolg mit einem textarea gefunden. Für ein Kennwortfeld gibt es einen Ereignishandler, der jedes eingegebene Zeichen durch ein "•" ersetzt.

2
eug

Ich brauchte einige zusätzliche Felder, damit es richtig funktioniert, da chrome tatsächlich viele Felder ausfüllt. Außerdem musste ich die Felder ausgefallener ausblenden als anzeigen: Keine, damit es tatsächlich funktioniert.

<style>.stylish { position:absolute; top:-2000px; }</style>
<input id="_____fake_email_remembered" class="stylish" tabindex="-1"  type="email" name="email_autofill"/> 
<input id="_____fake_userName_remembered" class="stylish" tabindex="-1"  type="text" name="userName_autofill"/>
<input id="_____fake_firstName_remembered" class="stylish" tabindex="-1"   type="text" name="firstName_autofill"/>
<input id="_____fake_lastName_remembered" class="stylish" tabindex="-1"   type="text" name="lastName_autofill"/>
<input id="_____fake_phone_remembered" class="stylish"  tabindex="-1"  type="text" name="phone_autofill"/>
<input id="_____fake_address_remembered" class="stylish"  tabindex="-1"   type="text" name="address_autofill"/>
<input id="_____fake_password_remembered" class="stylish"  tabindex="-1"   type="password" name="password_autofill"/>
<input id="_____fake_password_remembered2" class="stylish"  tabindex="-1"   type="password" name="passwordRepeated_autofill"/>
1
Juan Carrey

Wie Dvd Franco sagte, hat es für mich nur funktioniert, wenn ich Autocomplete = 'off' in allen Bereichen gesetzt habe. Also habe ich diese JQuery-Regeln in $ (document) .ready () eingefügt; Funktion für meine Haupt-.js-Datei

$('form.no_autofill').attr('autocomplete','off');
$('.no_autofill input').attr('autocomplete','off');
1
bocapio

Meine Lösung hängt von drei Dingen ab:

  1. keydown-Ereignis
  2. maskieren des Feldnamens
  3. ausblenden der Feldwerte beim Senden

Zunächst müssen wir verhindern, dass sowohl Benutzername als auch Passwort automatisch vervollständigt werden. Zunächst setzen wir zwei Flags, i -> Benutzername und j -> passowrd, auf den Wert true, ohne dass die Felder i und j gedrückt werden wahr.

In dem Fall, dass die Feldmaskierung auf der Serverseite erfolgt, kann sie durch Übergabe einer zufälligen Zeichenfolge auch auf der Clientseite problemlos vorgenommen werden.

Dies ist der Code:

$(document).ready(function(){
   i= true; //username flag
   j= true; // password flag
   $("#username{{$Rand}}").keydown(function(e){
          // {{$Rand}} is server side value passed in blade view
          // keyboard buttons are clicked in the field
            i = false;       
    });
   $("#passowrd{{$Rand}}").keydown(function(e){
          // {{$Rand}} is server side value passed in blade view
          // keyboard buttons are clicked in the field
            j = false;       
    });
    // Now we will use change event,
   $("#username{{$Rand}}").change(function(){
    if($(this).val() != ''){ //the field has value
        if(i){ // there is no keyboard buttons clicked over it
            $(this).val(''); // blank the field value
        }

    }
})
$("#password{{$Rand}}").change(function(){
    if($(this).val() != ''){ // the same as username but using flag j
        if(j){
            $(this).val('');
        }

    }
})

   $("#sForm").submit(function(e){ // the id of my form
      $("#password-s").val($("#password{{$Rand}}").val());
        $("#username-s").val($("#username{{$Rand}}").val());
        // Here the server will deal with fields names `password` and `username` of the hidden fields
       $("#username{{$Rand}}").val('');
        $("#password{{$Rand}}").val(''); 

 })
})

Hier sind die HTML:

<form class="form-horizontal" autocomplete="off" role="form" id="sForm" method="POST" action="https://example.com/login">

                        <input type="hidden" name="password" id="password-s">
                        <input type="hidden" name="username" id="username-s">

                            <label for="usernameTDU3m4d3I5" class="col-md-3 control-label" style="white-space: nowrap">Username</label>

                                <input id="usernameTDU3m4d3I5" placeholder="Username" autocomplete="off" style="border-bottom-left-radius: 10px; border-top-right-radius: 10px; font-family: fixed; font-size: x-large;" type="text" class="form-control" name="usernameTDU3m4d3I5" value="" required="required" autofocus="">                                

                            <label for="passwordTDU3m4d3I5" class="col-md-3 control-label" style="white-space: nowrap">Password</label>
                                <input id="passwordTDU3m4d3I5" placeholder="Password" autocomplete="off" type="password" class="form-control" name="pa-TDU3m4d3I5" required="">


                                <button type="submit" class="btn btn-success">
                                    <i class="fox-login" style="text-shadow: 0px 1px 0px #000"></i><strong>Login</strong>&nbsp;&nbsp;
                                </button>

                                </form>

Die obige Lösung verhindert oder beseitigt zwar nicht die automatische Vervollständigung des Benutzernamens und des Kennworts, macht diese jedoch unbrauchbar. Das heißt, ohne die Tastaturtaste auf dem Feld zu drücken, bleibt der Feldwert vor dem Senden leer, sodass der Benutzer aufgefordert wird, ihn einzugeben.

Aktualisieren

Wir können auch click event verwenden, um die automatische Vervollständigung der Benutzerliste zu verhindern, die unter dem Feld wie folgt angezeigt wird:

 $("#username{{$Rand}}").click(function(){

            $(this).val('');
            i = true;

})
$("#password{{$Rand}}").click(function(){

            $(this).val('');
            j = true;

})

Einschränkungen:

Diese Lösung möglicherweise nicht funktioniert bei Touchscreen-Geräten wie erwartet.

Endgültiges Update

Ich habe die folgende saubere Implementierung wie folgt durchgeführt:

preventAutoComplete = true; // modifier to allow or disallow autocomplete
trackInputs = {password:"0", username:"0"}; //Password and username fields ids as object's property, and "0" as its their values
// Prevent autocomplete
    if(preventAutoComplete){
        $("input").change(function(e){ // Change event is fired as autocomplete occurred at the input field 
            trackId = $(this).attr('id'); //get the input field id to access the trackInputs object            
            if (trackInputs[trackId] == '0' || trackInputs[trackId] != $(this).val()){ //trackInputs property value not changed or the prperty value ever it it is not equals the input field value
                $(this).val(''); // empty the field
            }
        });
        $("input").keyup(function(e){
            trackId = $(this).attr('id');
            trackInputs[trackId] = $(this).val(); //Update trackInputs property with the value of the field with each keyup.
        });
    } 
1
SaidbakR

Auf Chromium 53.0.2785.92 (64-Bit) funktionierte Folgendes

<div style="visibility:hidden">
    <input type="text" name="fake_username_remembered">
    <input type="password" name="fake_password_remembered">
</div>

display:none funktioniert nicht

1
michalzuber

Anscheinend funktionieren die besten Fixes/Hacks dafür jetzt wieder nicht mehr. Die von mir verwendete Version von Chrome ist die Version 49.0.2623.110 m. In meinen Formularen zur Kontoerstellung werden nun ein gespeicherter Benutzername und ein Kennwort angezeigt, die nichts mit dem Formular zu tun haben. Vielen Dank, Chrome! Andere Hacks schienen schrecklich, aber dieser Hack ist weniger schrecklich ...

Diese Hacks müssen funktionieren, da es sich bei diesen Formularen im Allgemeinen um Kontoerstellungsformulare handelt, d. H. Nicht um Anmeldeformulare, die das Kennwort ausfüllen dürfen. Formulare zur Kontoerstellung, die das mühsame Löschen von Benutzernamen und Kennwörtern ersparen. Logischerweise bedeutet dies, dass das Passwortfeld beim Rendern niemals ausgefüllt wird. Also benutze ich stattdessen eine Textbox und ein bisschen Javascript.

<input type="text" id="password" name="password" />

<script>
    setTimeout(function() {
        $("#password").prop("type", "password");
    }, 100); 
    // time out required to make sure it is not set as a password field before Google fills it in. You may need to adjust this timeout depending on your page load times.
</script>

Ich finde das akzeptabel, da ein Benutzer innerhalb kurzer Zeit kein Kennwortfeld erhält und das Zurückschreiben auf den Server keinen Unterschied macht, wenn das Feld ein Kennwortfeld ist, da es ohnehin als einfacher Text zurückgeschickt wird.

Vorsichtsmaßnahme: Wenn Sie wie ich dasselbe Erstellungsformular als Aktualisierungsformular verwenden, kann es schwierig werden. Ich verwende mvc.asp c # und wenn ich @ Html.PasswordFor () verwende, wird das Passwort nicht zum Eingabefeld hinzugefügt. Das ist eine gute Sache. Ich habe das umgangen. Die Verwendung von @ Html.TextBoxFor () und des Kennworts wird jedoch dem Eingabefeld hinzugefügt und dann als Kennwort ausgeblendet. Da meine Passwörter jedoch verschlüsselt sind, ist das Passwort im Eingabefeld das verschlüsselte Passwort und sollte niemals auf den Server zurückgesendet werden. Das versehentliche Speichern eines verschlüsselten Passworts wäre für jemanden, der versucht, sich einzuloggen, eine Belastung. Grundsätzlich. Denken Sie daran, das Kennwort auf eine leere Zeichenfolge festzulegen, bevor das Eingabefeld wiedergegeben wird, wenn Sie diese Methode verwenden.

1
Colin Wiseman

Falls display: none nicht funktioniert, ist dies ebenfalls möglich und scheint zu funktionieren (Chrome v60.0.3112.113):

.hidden-fields {
    opacity: 0;
    float: left;
    height: 0px;
    width: 0px;
}

<input type="text" name="username" class="hidden-fields"> 
<input type="password" name="password" class="hidden-fields">

<your actual login fields></your actual login fields>
1
Rikku121

Schließlich denke ich, dass ich mit einer annehmbaren Lösung gekommen bin. Besseres Verständnis der Funktionsweise des Dropdowns mit Chrome half :) Grundsätzlich wird das Dropdown angezeigt, wenn Sie die Eingabe fokussieren und wenn Sie ein Mouse-Down-Ereignis generieren, wenn Sie einen Eintrag eingeben, der mit welchem ​​Chrome hat im Speicher. Unter Berücksichtigung dessen und wenn Chrome für bestimmte Eingaben Standardnamen wie "Name", "E-Mail" usw. verwendet, müssen wir den Namen nur entfernen, wenn das Dropdown-Menü angezeigt wird angezeigt und fügen Sie es wieder nach :) Ich wollte eine Lösung verwenden, die es funktioniert nur durch Hinzufügen des Attributs Autocomplete aus. Ich fand es sinnvoll. Dies ist der Code:

Lösung 1

jQuery('body').on('mousedown','[name="name"][autocomplete="off"], [name="email"][autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    if(typeof this.currentName =="undefined")
        this.currentName=jQuery(this).attr('name');
    jQuery(this).attr('name','');
});

jQuery('body').on('blur','[autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    jQuery(this).attr('name',this.currentName);
});

Lösung 2 (Mein Favorit)

Die oben beschriebene Lösung entfernt den Namen der Eingabe, bis wir den Fokus (Unschärfe) entfernen. In diesem Moment wird der ursprüngliche Name wiederhergestellt. Es kann jedoch vorkommen, dass wir beim Tippen Interesse daran haben, über das Attribut name auf die Eingabe zuzugreifen. Das bedeutet, dass wir den Namen nach jeder Eingabe zurücksetzen müssen. Diese Lösung basiert im Wesentlichen auf der ersten Lösung. In diesem Fall fügen wir den Namen bei gedrückter Taste hinzu und setzen ihn bei gedrückter Taste wieder ein. Ich denke, dies ist ordentlicher, um die Kompatibilität mit dem Verhalten "Autocomplete Off" zu gewährleisten. Jedenfalls ist dies der Code:

jQuery('body').on('mousedown keydown','[name="name"][autocomplete="off"], [name="email"][autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    if(typeof this.currentName =="undefined")
        this.currentName=jQuery(this).attr('name');
    jQuery(this).attr('name','');
});
jQuery('body').on('blur keyup','[autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    if(typeof this.currentName !="undefined")
        jQuery(this).attr('name',this.currentName);
});

Bitte beachten Sie, dass ich für Lösung 1 und 2 nur die Fälle angenommen habe, in denen der Eingabename "Name" und "E-Mail" ist. In allen anderen Fällen, in denen dieses Attribut bewirkt, dass Chrome das Dropdown-Menü generiert, müssen Sie es in die Auswahlliste für das Mouse-Down-Ereignis einfügen.

Lösung

Diese Lösung ist viel unordentlicher. Mir war nicht klar, dass das Verhalten, das wir zu korrigieren versuchen, nur auf Eingaben mit einem bestimmten Namen wie "Name, E-Mail, usw." basiert. Der Ansatz dieser Lösung war für diesen Fall, dass Chrome für andere Namen angezeigt wird, die wir nicht a priori kennen. Es wäre eine sehr generische Lösung. Ich mag nicht so sehr wie die anderen 2, im Grunde, weil es zu einem kleinen Flimmern kommen kann, wenn wir die Entf-Taste drücken. Ich werde das unten erklären.

Ich habe herausgefunden, dass das Dropdown-Menü nach einem zweiten Klick auf die Eingabe angezeigt wird, aber nicht beim ersten Klick, wenn Sie sich zum ersten Mal auf die Eingabe konzentrieren. Ich binde ein "mousedown" -Ereignis für all diese Elemente, bei dem der Handler im Grunde erkennt, ob es bereits auf die Eingabe fokussiert ist, und erzwinge ein .blur () und anschließend .focus (), um dies zu verhindern das Dropdown auf den zweiten Klick, sobald es fokussiert ist. Ich hoffe, es ist klar, nur für den Fall, hier ist der Code, den ich verwendet habe:

jQuery('body').on('mousedown','[autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    if(jQuery(this).is(':focus')) {
        jQuery(this).blur();
        jQuery(this).focus();
    }
});

Auf der anderen Seite, um zu verhindern, dass das Dropdown während des Tippens mit Chrome Vorschlägen übereinstimmt ... Dies ist ein bisschen knifflig. Ich habe gerade beschlossen, das Standardverhalten einer Eingabe zu ersetzen, während der Benutzer tippt. Das Dropdown-Menü wertet die Eingabe bei gedrückter Maustaste aus, sodass ich das Standardverhalten für alphanumerische Zeichen, Leerzeichen usw. verhindere. Das einzige Problem ist Befehl, Strg und Löschen. Für diesen Fall musste ich auch ein Event auf mouse up binden. Es lässt das Standardverhalten in den ersten beiden Fällen zu, sodass Sie kopieren und einfügen oder alle auswählen können. Im Falle des Löschens muss ich das Standardverhalten zulassen, aber wenn nach dem Löschen eines Zeichens die Eingabe mit Chrome Vorschlägen übereinstimmt, wurde wieder das Dropdown-Menü angezeigt. In diesem Fall musste ich den gleichen Trick von Unschärfe und Fokus anwenden. Die einzige Unannehmlichkeit, die ich dabei festgestellt habe, ist, dass es ein kleines Flackern gibt, da wir das Verhalten beim Drücken der Taste abbrechen und chrome versucht, es beim Drücken der Taste anzuzeigen. Jedenfalls ist dies das Beste, was ich tun kann. Möglicherweise müssen die Zeichen an einer Stelle gefiltert werden. Ich habe gerade die Bedingungen hinzugefügt, die für den Moment sinnvoller waren. Dies ist der zweite Teil des Codes:

jQuery('body').on('keydown','[autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    var ctrlKey = 17,cmKey = 91;
    var charCode = e.which || e.keyCode;

    if(charCode!=16 && this.commandDown != true && this.ctrlDown != true && ((charCode>47 && charCode<58)||(charCode>64 && charCode<91)||(charCode>96 && charCode<123)||charCode==0 || charCode==32)){ 
        e.preventDefault();
        var charStr = String.fromCharCode(charCode);
        if(!e.shiftKey)
            charStr = charStr.toLowerCase(charStr);
        $(this).val($(this).val() + charStr);
    }else{
        if (charCode == cmKey) this.commandDown = true;
        if (charCode == ctrlKey) this.ctrlDown = true;
    }
});
jQuery('body').on('keyup','[autocomplete="off"]',function(e){
    e.stopImmediatePropagation();
    var allowed=[8];//Delete
    var ctrlKey = 17,cmKey = 91;
    var charCode = e.which || e.keyCode;

    if (charCode == cmKey) {this.commandDown = false};
    if (charCode == ctrlKey) {this.ctrlDown = false};
    if(allowed.indexOf(charCode)>=0 || (this.commandDown!=false && this.ctrlDown!=false)){
        jQuery(this).blur();
        jQuery(this).focus();
}

Wie gesagt, diese Lösung ist viel unordentlicher. Es war das erste, das ich verwendete, bis mir klar wurde, dass das Dropdown-Menü nur für bestimmte Eingabenamen angezeigt wurde.

Tut mir leid, dass ich so viel geschrieben habe, ich wollte nur sichergehen, dass alles klar ist. Ich hoffe, es hilft.

1
Yared Rodriguez

Boom, Google Chrome und alle anderen versuchen dies dann zu besiegen.

Ich konnte dies heute, am 7. September 2017, mithilfe einer FormCollection von zufälligen Zeichenfolgen implementieren, die in meiner MVC-Ansicht generiert wurden.

Ich würde zuerst einen neuen zufälligen Schlüssel in meinem Index-Controller meiner Anmeldeseite erhalten, verschlüsseln und eine neue, völlig eindeutige zufällige Zeichenfolge erstellen (ich habe tatsächlich einen 256-Bit-Verschlüsselungscode verwendet, um dies durchzuführen, und einen eindeutigen Verschlüsselungscode und einen Authentifizierungsschlüssel), und dann anhängen Klartext 'Benutzername' und 'Passwort' am Ende jeder Zeichenfolge, damit ich später den Benutzernamen und das Passwort vom entsprechenden Ansichtscontroller identifizieren kann. Sie können diese einfache Zeichenfolge auch in eine beliebige Zeichenfolge ändern, sofern Sie das Muster kennen und es eindeutig ist.

Meiner Ansicht nach habe ich diese Variablen dann entsprechend verwendet und dann im antwortenden Controller - eine FormCollection durchsucht und meine übereinstimmenden Variablen gefunden - und dann den Schlüsselwert dieses Elements als entsprechenden Benutzernamen und das zugehörige Kennwort verwendet, um die entsprechende Verarbeitung durchzuführen.

Das andere Problem, das ich hatte, von dem ich denke, dass es hinter Chrome her ist, ist, dass es eines ist

Irgendwelche Gedanken?

<style>
    @@font-face {
      font-family: 'password';
      font-style: normal;
      font-weight: 400;
      src: url(https://jsbin-user-assets.s3.amazonaws.com/rafaelcastrocouto/password.ttf);
    }
</style>

<input type="text" name="@Model.UsernameRandomNameString" />
<input style="font-family: 'password'" type="text" name="@Model.PasswordRandomNameString" />

LogOnModel model = new LogOnModel()
            {
                UsernameRandomNameString = Cryptography.SimpleEncrypt("Username", UniqueGeneratorKey, UniqueGeneratorKey) + "Username",
                PasswordRandomNameString = Cryptography.SimpleEncrypt("Password", UniqueGeneratorKey, UniqueGeneratorKey) + "Password",
            };

Ich denke, es ist eine verdammt gute Umgehung, aber hey, es funktioniert und ich denke, es könnte auch zukunftssicher sein, wenn Google nicht bestimmt, dass die URL der Seite Schlüsselwörter enthält, und dann die blöden Erweiterungen in jedem Eingabefeld entsprechend oben anfügt - aber das ist ein bisschen drastisch.

1
Jeffrey Holmes

Für Angular Benutzer:

Da der autocomplete = 'off' von neuen chrome Versionen ignoriert wird, schlägt der chrome Entwickler Autocomplete = 'false | vor Random-String ', so dass die Google Chrome/moderne Browser 2 Arten von Benutzer Helfer haben -

  1. autocomplete='off' (verhindert die letzten zwischengespeicherten Vorschläge).
  2. autocomplete = 'false | random-string' (verhindert das automatische Ausfüllen, da der Browser die Zufallszeichenfolge nicht kennt).

was tun, wenn beide lästigen Vorschläge deaktiviert werden? Hier ist der Trick: -

  1. fügen Sie in jedes Eingabefeld autocomplete = 'off' ein. (oder einfache JQuery).

Beispiel: $("input").attr('autocomplete', 'off');

  1. Entfernen Sie das <form name='form-name'> -Tag aus dem HTML-Code und fügen Sie ng-form = 'form-name' in Ihren <div> -Container ein. Durch Hinzufügen von ng-form="form-name" werden auch alle Ihre Überprüfungen beibehalten.
1
Karan Vyas

Ich habe alle genannten Ratschläge ausprobiert, aber keiner von ihnen hat funktioniert. Ich verwende eine automatische Vervollständigung für Google Places in der Eingabe specifik, und es ist ziemlich hässlich, wenn über der automatischen Vervollständigungsliste für Google Places eine automatische Vervollständigung für Google chrome vorhanden ist. Selbst das Setzen von autocomplete = "anything" ist nutzlos, da das Autocomplete-Plugin selbst dieses Attribut auf "off" setzt und es von Chrome völlig ignoriert wird.

so meine sollution ist:

var fixAutocomplete = window.setInterval(function(){
    if ($('#myinput').attr('autocomplete') === 'false') {
        window.clearInterval(fixAutocomplete);  
    }

    $('#myinput').attr('autocomplete', 'false');
}, 500);
0
Gyürüs Máté

reine HTML-Lösung:

(Kein Javascript, kein CSS und keine versteckten Eingaben erforderlich)

<form autoComplete="new-password" ... >
        <input name="myInput" type="text" autoComplete="off" id="myInput" placeholder="Search field" />
</form>

Anmerkungen:

  • form muss nicht unbedingt das direkte übergeordnete Element des Eingabeelements sein
  • die Eingabe erfordert ein Namensattribut
0
w3jimmy

Ich hatte dieses Problem mit einem modalen Fenster "Jetzt anmelden oder registrieren" und war ein Problem, wenn der Benutzer seine Anmeldeinformationen im Browser gespeichert hatte. Sowohl das Anmelde- als auch das Registrierungsfeld wurden ausgefüllt, sodass ich sie mit der folgenden Anweisung angular js löschen konnte:

(function () {
    "use strict";

    var directive = function ($timeout) {
        return {
            restrict: "A",
            link: function (scope, element, attrs) {
                $timeout(function () {
                    element.val(" ");
                    $timeout(function () {
                        element.val("");
                    });
                });
            }
        };
    };

    angular.module("app.directives").directive("autofillClear", ["$timeout", directive]);
}());

Es ist im Grunde dasselbe wie bei einigen der vorherigen Antworten, bei denen jquery verwendet wurde, jedoch auf eine angular Weise.

0
David Adams

Wenn Sie Symfony-Formulare verwenden, funktioniert autocomplete=off nicht, wenn das Attribut über die Vorlage twig angewendet wird, anstatt FormBuilder zu verwenden.

Benutze das:

....
->add('field-name', TextType::class, array(
  'attr' => array(
      'autocomplete' => 'off'
  )
)
....

Eher, als:

....
{{ form_widget(form.field-name, {'attr': {'autocomplete':'off'}})
....
0
tutak

Was ich getan habe, ist es, den Eingabetyp = "Text" in einen mehrzeiligen Eingang zu ändern, d. H.

 overflow-x:hidden;
 overflow-y:hidden;
 vertical-align:middle;
 resize: none;

Eine kurze Erklärung des Codes: Die ausgeblendeten Überlauf-x und -y deaktivieren die Bildlaufschaltflächen rechts neben dem Textfeld. Mit dem vertikalen Algin wird die vertikale Mitte des Etiketts am Textbereich und an der Größenänderung ausgerichtet: Keine deaktiviert den Größenänderungs-Grabber unten rechts im Textbereich.

Im Wesentlichen bedeutet dies, dass Ihr Textbereich wie ein Textfeld aussieht, jedoch mit deaktiviertem chrome -AutoFill.

0
nawissor

Ich weiß, dass dies nicht genau relevant ist, aber hier ist, was ich getan habe. Die automatisch ausgefüllten Felder lösen ein "Änderungs" -Ereignis aus, jedoch nur, wenn Sie es so früh wie möglich an sie binden.

also habe ich dies in den Kopfteil gelegt.

  $(document).ready(function(){
            $('input').on('change',function(){$(this).val('')})
     }); 

und es hat bei mir funktioniert.

0
Hemant_Negi

Mein Hack - getestet in Chrome 48:

Da Chrome versucht, die Art des Feldes herauszufinden, werden Dinge wie id oder name der <input>, aber auch zugehörige <label> betrachtet ] _ Inhalt, Sie müssen nur sinnlose Namen für diese finden.

Für id und name ist es einfach, etwas anderes auszuwählen, das nicht aufgeführt ist hier .

Für label habe ich einen unsichtbaren <span> in die Mitte eingefügt, z. für eine Stadt (es spielt mit meinem Places autocomplete) :

<span>Ci<span style="display:none">*</span>ty</span>

Voll funktionsfähiges Beispiel:

<!DOCTYPE html>
<html>
  <body>
    <form method="post" action="/register">
      <div>
        <label for="name">Name</label>
        <input id="name" type="text" name="name" />
      </div>
      <div>
        <label for="email">Email</label>
        <input id="email" type="text" name="email" />
      </div>
      <div>
        <label for="id1">City</label>
        <input id="id1" type="text" name="id1" /> <-- STILL ON :(
      </div>
      <div>
        <label for="id2">Ci<span style="display:none">*</span>ty</label>
        <input id="id2" type="text" name="id2" /> <-- NOW OFF :)
      </div>
    </form>
  </body>
</html>
0
antoine129

Antwort von Jobin Jose hat mich erschreckt. Folgendes funktioniert bei mir:

<input type="password" name="password" id="password_fake" style="display:none;" />
<input type="password" name="password"/>

Stellen Sie sicher, dass Autocomplete = "off" nicht aktiviert ist, da dies die Lösung beeinträchtigt.

0
alehro

Mein Problem war, dass Chrome die Postleitzahl automatisch über die Bootstrap Autocomplete-Schnittstelle ausfüllt, da ich automatisch mögliche Werte aus meiner Datenbank vorschlug.

Dinge, die ich tun musste:

  • Ändern Sie die Eigenschaft id des Eingabefelds in eine andere als "Postleitzahl".
  • Ändern Sie den autocomplete Wert des Eingabefelds in false
  • Nach dem Aufruf von $('#postcode_field').autocomplete(...) musste ich die Autocomplete-Eigenschaft mit $('#postcode_field').prop('autocomplete', 'false'); zurücksetzen, da das Autocomplete-Plugin von Boostrap sie automatisch in off ändert.
0
frin

Da keine Anzeige mehr zu funktionieren scheint, füge die hinzu

<input type="text" name="fakeusernameremembered"/>
<input type="password" name="fakepasswordremembered"/>

in einem div mit verstecktem überlauf, max-width & max-height 0px

So wird es so etwas wie:

<div style="overflow: hidden; max-width: 0px; max-height: 0px;">
    <input type="text" name="fakeusernameremembered"/>
    <input type="password" name="fakepasswordremembered"/>
</div>
0
MiVvlt

Geben Sie den Wert '' (ein Leerzeichen) für das Feld Benutzername ein.

<input type = 'text' value = ' ' name = 'username' />

Wenn Sie den Benutzernamen jemals mit einem vom Benutzer eingegebenen Wert füllen, geben Sie ein '' ein, wenn kein vom Benutzer eingegebener Wert vorhanden ist.

Bearbeiten: Ich musste auch "Benutzername" -Felder ändern, um einen anderen Namen als "Benutzername" zu haben, z. 'nameofuser'

0
Geoff Kendall

Muss auch den Wert auf leer setzen (value = ""), außer autocomplete = "off", damit es funktioniert.

0
Iamzozo

Die Methode zum Ausblenden durch Hinzufügen von "display: none"; für die Eingabe hat bei mir nicht funktioniert, wenn das Formular mit Javascript generiert wurde.

Also habe ich sie unsichtbar gemacht, indem ich sie unsichtbar gemacht habe:

<input style="width:0;height:0;opacity:0;position:absolute;left:-10000px;overflow:hidden;" type="text" name="fakeusernameremembered"/>
<input style="width:0;height:0;opacity:0;position:absolute;left:-10000px;overflow:hidden;" type="password" name="fakepasswordremembered"/>
0
typocoder

Leider scheint keine der Lösungen zu funktionieren. Ich konnte E-Mails (Benutzernamen) mit ausblenden

                    <!-- fake fields are a workaround for chrome autofill getting the wrong fields -->
                    <input style="display:none" type="text" name="fakeusernameremembered"/>
                    <input style="display:none" type="password" name="fakepasswordremembered"/>

technik, aber das Passwort wird immer noch ausgefüllt.

0
Srini Kancharla

20. Januar chrome Update

Keine der oben genannten Lösungen, einschließlich des Hinzufügens gefälschter Felder oder des Einstellens von autocomplete = new-password, funktioniert. Ja, mit diesen chrome wird nicht automatisch vervollständigt, aber wenn Sie das Passwortfeld eingeben, wird das Passwort erneut vorgeschlagen.

Ich habe festgestellt, dass, wenn Sie das Kennwortfeld entfernen und es dann erneut hinzufügen ohne eine ID dann chrome es nicht automatisch ausfüllt und das Kennwort bei der Eingabe nicht vorschlägt.

Verwenden Sie eine Klasse, um den Kennwortwert anstelle einer ID abzurufen.

Für Firefox muss noch ein Dummy-Element hinzugefügt werden.

Diese Lösung ermöglicht auch das Zulassen/Verbieten der automatischen Vervollständigung basierend auf einem Flag:

html:

<!-- form is initially hidden, password field has a dummy id and a class 'id' -->
<form id="loginForm" style="display:none;">
   <span>email:</span><input type="text" placeholder="Email" id="loginEmailInputID"/>
   <span>Password:</span><input class="loginPasswordInput" type="password" placeholder="Password" id="justForAutocomplete"/>
</form>

seitenladen:

function hideAutoComplete(formId) {
    let passwordElem=$('#'+formId+' input:password'), prev=passwordElem.prev();
    passwordElem.remove();
    prev.after($('<input type="password" style="display:none">'), passwordElem.clone().val('').removeAttr('id'));
}

if (!allowAutoComplete) hideAutoComplete('loginForm');
$('#loginForm').show();

wenn du das Passwort brauchst:

$('.loginPasswordInput').val();
0
kofifus

Keine der anderen Lösungen für diese Frage hat für mich funktioniert.

Der einzige Gedanke, der funktioniert hat, ist dieser :

Es entfernt die Attribute "name" und "id" von Elementen und weist sie nach 1 ms wieder zu. Legen Sie dies in Dokument fertig.

$(document).ready(function() {
    $('form[autocomplete="off"] input, input[autocomplete="off"]').each(function () {

                var input = this;
                var name = $(input).attr('name');
                var id = $(input).attr('id');

                $(input).removeAttr('name');
                $(input).removeAttr('id');

                setTimeout(function () {
                    $(input).attr('name', name);
                    $(input).attr('id', id);
                }, 1);
            });
});
0
J0ANMM

Keine der Lösungen hat für mich funktioniert. Nachdem ich mir viele Stunden die Haare ausgezogen hatte, kam ich schließlich auf diese Lösung für ReactJS.

Getestet unter FireFox 54.0.1, Chrome 61.0.3163.100, Mac OS 10.13

Ich behalte den type="text" und ändere ihn am onChange -Ereignis in den entsprechenden Typ.

zB: HTML:

<input type="text" onChange={this.setAttributes} placeholder="Email" />

JS:

setAttr2: function(e){
    var value = e.target.value;
    if(value.length){
      e.target.setAttribute('type', 'email')
    } else {
      e.target.setAttribute('type', 'text')
    }
  }
0
coder9

Die Autovervollständigungsfunktion wurde mit diesem Trick erfolgreich deaktiviert. Es funktioniert!

[HTML]

<div id="login_screen" style="min-height: 45px;">
   <input id="password_1" type="text" name="password">
</div>

[JQuery]

$("#login_screen").on('keyup keydown mousedown', '#password_1', function (e) {
    let elem = $(this);

    if (elem.val().length > 0 && elem.attr("type") === "text") {
        elem.attr("type", "password");
    } else {
        setTimeout(function () {
            if (elem.val().length === 0) {
                elem.attr("type", "text");
                elem.hide();
                setTimeout(function () {
                    elem.show().focus();
                }, 1);
            }
        }, 1);
    }

    if (elem.val() === "" && e.type === "mousedown") {
        elem.hide();
        setTimeout(function () {
            elem.show().focus();
        }, 1);
    }

});
0
EngineerCoder