webentwicklung-frage-antwort-db.com.de

Deaktivieren Sie das automatische Ausfüllen von Formularen in Chrome, ohne die automatische Vervollständigung zu deaktivieren

Wie können wir die AutoFill-Funktion von Chrome für bestimmte <input>s deaktivieren, damit sie beim Laden der Seite nicht automatisch gefüllt werden?

Gleichzeitig muss Autocomplete aktiviert bleiben, damit der Benutzer die Liste der Vorschläge immer noch sehen kann, indem er auf die Eingabe klickt oder sie eingibt. Kann das gemacht werden?

BEARBEITEN: Fühlen Sie sich frei, einfach Javascript oder jQuery zu verwenden, wenn Sie es für notwendig erachten oder das Gefühl haben, dass Ihre Lösung einfacher wird.

40
Elias Zamaria

Hier ist die Magie, die Sie wollen:

    autocomplete="new-password"

Chrome ignoriert absichtlich autocomplete="off" und autocomplete="false". Sie setzen jedoch new-password als spezielle Klausel ein, um das automatische Ausfüllen neuer Kennwortformulare zu verhindern.

Ich füge die obige Zeile in meine Passworteingabe ein und jetzt kann ich andere Felder in meinem Formular bearbeiten und das Passwort wird nicht automatisch ausgefüllt.

59
Mirror318

Etwas spät, aber hier ist meine narrensichere Lösung nützlich für Seiten wie die Anmelde-/Registrierungsseite, auf der der Benutzer ein neues Passwort eingeben muss.

<form method="post">
    <input type="text" name="fname" id="firstname" x-autocompletetype="given-name" autocomplete="on">
    <input type="text" name="lname" id="lastname" x-autocompletetype="family-name" autocomplete="on">
    <input type="text" name="email" id="email" x-autocompletetype="email" autocomplete="on">
    <input type="password" name="password" id="password_fake" class="hidden" autocomplete="off" style="display: none;">
    <input type="password" name="password" id="password" autocomplete="off">
</form>

Chrome erkennt zwei Kennworteingaben und füllt die Kennwortfelder nicht automatisch aus. Das Feld id = "password_fake" wird jedoch über CSS ausgeblendet. Der Benutzer sieht also nur ein Passwortfeld.

Ich habe auch einige zusätzliche Attribute hinzugefügt "x-autocompletetype", die eine Chrome-Experiment-spezifische Auto-Fill-Funktion ist. In meinem Beispiel füllt Chrome automatisch den Vornamen, den Nachnamen und die E-Mail-Adresse aus und NICHT das Kennwortfeld.

43

Fix: verhindert das automatische Ausfüllen des Browsers

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

Update: Mobile Safari setzt den Cursor in das Feld, zeigt jedoch keine virtuelle Tastatur an. Neuer Fix funktioniert wie zuvor, behandelt aber 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 Anstatt Whitespaces oder Window-on-Load-Funktionen auszufüllen, funktioniert dieses Snippet durch Festlegen des Readonly-Modus und Wechseln in schreibbar, wenn der Benutzer dieses Eingabefeld fokussiert (Fokus enthält Mausklick und Tabulatorfelder).

Keine jQuery erforderlich, reines JavaScript.

24
dsuess

Nach langem Kampf habe ich festgestellt, dass die Lösung viel einfacher ist, als Sie sich vorstellen könnten:

Anstelle von autocomplete="off" verwenden Sie einfach autocomplete="false";).

Versuche dies...

$(document).ready(function () {
    $('input').attr('autocomplete', 'false');
});
11
Dipen Dedania

Ich stolperte heute über das seltsame Chrom-Autofill-Verhalten. Die Aktivierung der Felder "embed" und "postpassword" (Eingabe von Login und Passwort) erfolgte ohne ersichtlichen Grund. Für diese Felder war die automatische Vervollständigung bereits deaktiviert.

Keine der beschriebenen Methoden schien zu funktionieren. Keine der Methoden aus der anderen Antwort funktionierte ebenfalls gut. Ich bin auf meine eigene Idee gestoßen, die auf Steeles Antwort basiert (sie hat tatsächlich funktioniert, aber ich benötige das feste Postdatenformat in meiner Bewerbung):

Fügen Sie vor dem echten Passwort diese beiden Dummy-Felder hinzu:

<input type='text' style='display: none'>
<input type='password' style='display: none'>

Nur diese hat das Autofill für mein Formular endgültig deaktiviert.

Es ist eine Schande, dass das Deaktivieren eines solchen grundlegenden Verhaltens so hart und hackig ist.

8
czaks

Ich kann mein Chrome nicht automatisch beim Laden der Seite automatisch ausfüllen lassen, um dies zu testen. Sie können jedoch autocomplete="off" zu Ihren Feldern hinzufügen und dann das Attribut beim Laden entfernen:

$(window).load(function() { // can also try on document ready
    $('input[autocomplete]').removeAttr('autocomplete');
});
4
Jeffery To

Dies könnte hilfreich sein: https://stackoverflow.com/a/4196465/683114

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}

Es sieht aus wie beim Laden, es findet alle Eingaben mit Autofill, fügt ihre äußere HTML hinzu und entfernt das Original, wobei Wert und Name erhalten bleiben (leicht zu ändern, um die ID zu erhalten usw.)

Wenn dadurch der Text zum automatischen Ausfüllen beibehalten wird, können Sie ihn einfach einstellen 

var text = "";   /* $(this).val(); */

Aus dem ursprünglichen Formular, in dem dies veröffentlicht wurde, wird behauptet, dass die automatische Vervollständigung erhalten bleibt. :)

Viel Glück!

2
nighthawk454

autocomplete="off" der Eingabe funktioniert jetzt auf Chrome V44 (und Canary V47)

1
Anas

Eine Lösung wäre, die Eingaben automatisch mit Leerzeichen zu füllen und klar zu fokussieren.

Beispiel: http://nfdb.net/autofill.php

<!doctype html>
<html>
    <head>
        <title>Autofill Test</title>
        <script>
            var userfield;

            // After the document has loaded, manipulate DOM elements.
            window.addEventListener('load', function() {

                // Get the username field element.
                userfield = document.getElementById('user');

                // Listen to the 'focus' event on the input element.
                userfield.addEventListener('focus', function() {

                    // Checks if the value is the EM space character,
                    // and removes it when the input is recieves focus.
                    if (this.value == '\u2003') this.value = ''

                }, false);

                // Listen to the 'blur' event on the input element.
                // Triggered when the user focuses on another element or window.
                userfield.addEventListener('blur', function() {

                    // Checks if the value is empty (the user hasn't typed)
                    // and inserts the EM space character if necessary.
                    if (this.value == '') this.value = '\u2003';

                }, false);
            }, false);
        </script>
    </head>
    <body>
        <form method="GET" action="">
            <input id="user" name="username" type="text" value="&#8195;"/><br/>
            <input name="password" type="password" value=""/><br/>
            <input type="submit" value="Login">
        </form>
    </body>
</html>

Dies sollte den Browser daran hindern, die Felder automatisch auszufüllen, es ihnen jedoch weiterhin erlauben, sie automatisch auszufüllen.

Hier ist ein weiteres Beispiel, das die Formulareingaben nach dem Laden der Seite löscht. Der Vorteil dieser Methode ist, dass die Eingaben niemals Whitespace-Zeichen enthalten. Der Nachteil besteht jedoch darin, dass die automatisch ausgefüllten Werte für einige Millisekunden sichtbar sind.

http://nfdb.net/autofill2.php

<!doctype html>
<html>
    <head>
        <title>Autofill Test</title>
        <script>
            var userfield, passfield;

            // Wait for the document to load, then call the clear function.
            window.addEventListener('load', function() {

                // Get the fields we want to clear.
                userfield = document.getElementById('user');
                passfield = document.getElementById('pass');

                // Clear the fields.
                userfield.value = '';
                passfield.value = '';

                // Clear the fields again after a very short period of time, in case the auto-complete is delayed.
                setTimeout(function() { userfield.value = ''; passfield.value = ''; }, 50);
                setTimeout(function() { userfield.value = ''; passfield.value = ''; }, 100);

            }, false);
        </script>
    </head>
    <body>
        <div>This form has autofill disabled:</div>
        <form name="login" method="GET" action="./autofill2.php">
            <input id="user" name="username" type="text" value=""/><br/>
            <input id="pass" name="password" type="password" value=""/><br/>
            <input type="submit" value="Login">
        </form>
        <div>This form is untouched:</div>
        <form name="login" method="GET" action="./autofill2.php">
            <input name="username" type="text" value=""/><br/>
            <input name="password" type="password" value=""/><br/>
            <input type="submit" value="Login">
        </form>
    </body>
</html>
1
Nimphious

Ich war vor kurzem mit diesem Problem konfrontiert, und da es keine einfache Lösung gibt, da meine Felder vorbelegt werden können, wollte ich einen eleganten Hack teilen, den ich durch das Festlegen des Kennworttyps im ready-Ereignis gefunden hatte.

Deklarieren Sie Ihr Eingabefeld bei der Erstellung nicht als Typkennwort, sondern fügen Sie einen fertigen Ereignislistener hinzu, um es für Sie hinzuzufügen:

function createSecretTextInput(name,parent){
    var createInput = document.createElement("input");
    createInput.setAttribute('name', name);
    createInput.setAttribute('class', 'secretText');
    createInput.setAttribute('id', name+'SecretText');
    createInput.setAttribute('value', 'test1234');

    if(parent==null)
       document.body.appendChild(createInput);
    else
        document.getElementById(parent).appendChild(createInput);

    $(function(){
        document.getElementById(name+'SecretText').setAttribute('type', 'password');
    });
};

createSecretTextInput('name', null);

http://jsfiddle.net/

1
Matthew
var fields = $('form input[value=""]');
fields.val(' ');
setTimeout(function() {
    fields.val('');
}, 500);
0
Markus Dl

Bis jetzt habe ich herausgefunden, dass dieser Vorgang funktioniert, und ich muss ein Timeout von 1 ms einstellen, damit die Aktion nach dem automatischen Füllen von Chrome abgeschlossen wird.

$(window).on('load', function() {
    setTimeout(function(){
        $('input[name*=email],input[name*=Password]').val('-').val(null);
    },1);
});

Ich frage mich, ob es eine Möglichkeit gibt, diese Funktion an das Abschließen der Chrom-Selbstausführung anzuschließen oder sogar neu zu deklarieren

0
Jack

Bei der einfachsten Lösung geben Sie den Wert "" für das Feld "Benutzername" an (das Sie weiterhin "Benutzername" nennen können).

Wenn der Wert durch vom Benutzer eingegebene Werte aufgefüllt werden kann, wie in der Regel für ein Formular, das Sie überprüfen, geben Sie den Wert '' an, wenn es noch nicht festgelegt ist. In PHP

if(trim($username) == ''){$username = ' ';}

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

Ich denke, Autovervollständigung für Benutzername und Kennwort gibt jedem, der auf Ihren Computer zugreift, Zugriff auf alle Ihre Konten, unabhängig davon, wie undeutlich Ihre Kennwörter sind.

0
Geoff Kendall

Keine schöne Lösung, arbeitete aber mit Chrome 56:

<INPUT TYPE="text" NAME="name" ID="name" VALUE=" ">
<INPUT TYPE="password" NAME="pass" ID="pass">

Beachten Sie ein Leerzeichen auf dem Wert. Und dann:

$(document).ready(function(){
   setTimeout("$('#name').val('')",1000);
});
0
Arvy

Meine Lösung basiert auf der dsuess-Benutzerlösung, die in IE für mich nicht funktionierte, da ich noch einmal in das Textfeld klicken musste, um eintippen zu können. Deshalb habe ich es nur an Chrome angepasst:

$(window).on('load', function () {
    if (navigator.userAgent.indexOf("Chrome") != -1) {
        $('#myTextBox').attr('readonly', 'true');
        $('#myTextBox').addClass("forceWhiteBackground");
        $('#myTextBox').focus(function () {
            $('#myTextBox').removeAttr('readonly');
            $('#myTextBox').removeClass('forceWhiteBackground');
        });
    }
});

Fügen Sie in Ihrer CSS Folgendes hinzu:

.forceWhiteBackground {
    background-color:white !important;
}
0
Adi Adi

Der Chrome-Kennwortmanager sucht nach Eingabeelementen mit type="password" und gibt das gespeicherte Kennwort ein. Außerdem wird die autocomplete="off"-Eigenschaft ignoriert.

Hier ist ein Update für neueste Chrome (Version 40.0.2181.0 Canary) :

<input name="password">

JS:

setTimeout(function() {
    var input = document.querySelector("input[name=password]");
    input.setAttribute("type", "password");
}, 0)
0
Aleksandr Sabov

Etwas spät zur Party ... aber mit jQuery ist das leicht zu bewerkstelligen:

$(window).on('load', function() {
    $('input:-webkit-autofill').each(function() {
        $(this).after($(this).clone(true).val('')).remove();
    });
});

Pros

  • Entfernt Text und Hintergrundfarbe für das automatische Ausfüllen.
  • Behält das automatische Vervollständigen des Feldes bei.
  • Hält alle Ereignisse/Daten an das Eingabeelement gebunden.

Cons

  • Beim Laden der Seite blinkt das automatisch ausgefüllte Feld schnell.
0
Saul Fautley

Ich mag es nicht, setTimeout zu verwenden oder habe seltsame temporäre Eingaben. .__ Ich habe mir das ausgedacht.

Ändern Sie einfach Ihren Kennwortfeldtyp in Text 

<input name="password" type="text" value="">

Und wenn der Benutzer diese Eingabe fokussiert, ändern Sie ihn erneut in Kennwort

$('input[name=password]').on('focus', function (e) {
    $(e.target).attr('type', 'password');
});

Sein Arbeiten mit neuestem Chrome (Version 54.0.2840.71 (64-Bit))

0
Tiago Seabra

Hier ist die neueste Lösung, die ich entdeckt habe ... Dies stoppt, dass Google die Felder ausfüllt und gelb markiert, bevor Sie überhaupt etwas eingegeben haben. Grundsätzlich, wenn Sie "display: none" auf das Feld setzen, ist Google intelligent genug, um es zu ignorieren und zum nächsten Feld zu wechseln. Wenn Sie "Sichtbarkeit: Verborgen" setzen, zählt es jedoch als Feld im Formular, das die Berechnungen zu stören scheint. Kein Javascript benötigt.

<form method='post'>
    <input type='text' name='u' size='16'/>
    <input type='password' name='fake' size='1' style='width:1px;visibility:hidden'/><br />
    <input type='password' name='p' size='16'/>
</form>
0