Ho riscontrato problemi con il comportamento di compilazione automatica di Chrome in diverse forme.

Tutti i campi nel modulo hanno nomi molto comuni e precisi, come "e-mail", "nome" o "password", e hanno anche autocomplete="off"impostato.

Il flag di completamento automatico ha disabilitato correttamente il comportamento di completamento automatico, in cui viene visualizzato un elenco a discesa di valori quando si inizia a digitare, ma non ha modificato i valori in cui Chrome popola automaticamente i campi.

Questo comportamento sarebbe corretto, tranne per il fatto che Chrome sta riempiendo gli input in modo errato, ad esempio inserendo l'input del telefono con un indirizzo email. I clienti si sono lamentati di questo, quindi è verificato che accada in più casi e non come una sorta di risultato a qualcosa che ho fatto localmente sul mio computer.

L'unica soluzione attuale che mi viene in mente è quella di generare dinamicamente nomi di input personalizzati e quindi estrarre i valori sul back-end, ma questo sembra un modo piuttosto confuso per risolvere questo problema. Ci sono tag o stranezze che cambiano il comportamento di compilazione automatica che potrebbero essere utilizzati per risolvere questo problema?

Per le nuove versioni di Chrome puoi semplicemente inserire autocomplete="new-password"il campo della password e il gioco è fatto. L'ho controllato, funziona bene.

Ho ricevuto quel consiglio dallo sviluppatore di Chrome in questa discussione: https://bugs.chromium.org/p/chromium/issues/detail?id=370363#c7

PS Tieni presente che Chrome tenterà di dedurre il comportamento del riempimento automatico da nome, ID e qualsiasi contenuto di testo che può circondare il campo, comprese etichette e nodi di testo arbitrari. Se è presente un token di completamento automatico come street-addressnel contesto, Chrome lo compilerà automaticamente come tale. L'euristico può essere piuttosto confuso poiché a volte si attiva solo se ci sono campi aggiuntivi nel modulo o no se ci sono troppi campi nel modulo. Si noti inoltre che autocomplete="no"sembrerà funzionare ma autocomplete="off"non per ragioni storiche. autocomplete="no"stai dicendo al browser che questo campo dovrebbe essere completato automaticamente come un campo chiamato "no". Se generi autocompletenomi casuali univoci disabiliti il ​​completamento automatico.

Se i tuoi utenti hanno visitato moduli non validi, le informazioni di compilazione automatica potrebbero essere danneggiate . Farli entrare manualmente e correggere le informazioni di compilazione automatica in Chrome può essere un'azione necessaria da parte loro.

Ho appena scoperto che se hai un nome utente e una password ricordati per un sito, la versione corrente di Chrome riempirà automaticamente il tuo nome utente / indirizzo email nel campo prima di qualsiasi type=passwordcampo. Non importa come si chiama il campo - presuppone solo il campo prima che la password diventi il ​​tuo nome utente.

Vecchia soluzione

Basta usare <form autocomplete="off">e impedisce la precompilazione della password e qualsiasi tipo di riempimento euristico di campi basato su ipotesi che un browser può fare (che spesso sono sbagliate). Al contrario dell'uso, <input autocomplete="off">che sembra essere praticamente ignorato dalla password di compilazione automatica (in Chrome, cioè, Firefox la obbedisce).

Soluzione aggiornata

Chrome ora ignora <form autocomplete="off">. Pertanto la mia soluzione alternativa (che avevo eliminato) è ora di gran moda.

Basta creare un paio di campi e renderli nascosti con "display: none". Esempio:

<!-- 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"/>

Quindi metti i tuoi campi reali sotto.

Ricorda di aggiungere il commento o altre persone della tua squadra si chiederanno cosa stai facendo!

Aggiornamento marzo 2016

Appena testato con l'ultimo Chrome - tutto bene. Questa è una risposta abbastanza vecchia ora, ma voglio solo menzionare che il nostro team la utilizza da anni su decine di progetti. Funziona ancora alla grande nonostante alcuni commenti qui sotto. Non ci sono problemi con l'accessibilità perché i campi display:nonesignificano che non ottengono il focus. Come ho già detto, devi metterli davanti ai tuoi campi reali.

Se si utilizza JavaScript per modificare il modulo, è necessario un ulteriore trucco. Mostra i campi falsi mentre stai manipolando il modulo e poi nascondili di nuovo un millisecondo dopo.

Codice di esempio usando jQuery (supponendo che tu dia una classe ai tuoi campi falsi):

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

Aggiornamento luglio 2018

La mia soluzione non funziona più così bene da quando gli esperti di anti-usabilità di Chrome hanno lavorato sodo. Ma ci hanno lanciato un osso sotto forma di:

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

Funziona e risolve principalmente il problema.

Tuttavia, non funziona quando non si dispone di un campo password ma solo di un indirizzo e-mail. Può anche essere difficile far smettere di ingiallire e precompilare. La soluzione dei campi falsi può essere utilizzata per risolvere questo problema.

Infatti a volte è necessario rilasciare due lotti di campi falsi e provarli in luoghi diversi. Ad esempio, avevo già campi falsi all'inizio del mio modulo, ma Chrome ha recentemente iniziato a precompilare il mio campo "Email", quindi ho raddoppiato e ho inserito altri campi falsi appena prima del campo "Email", e questo lo ha risolto . La rimozione del primo o del secondo lotto di campi ripristina un riempimento automatico troppo zelante errato.

Aggiornamento marzo 2020

Non è chiaro se e quando questa soluzione funziona ancora. Sembra funzionare ancora a volte ma non sempre.

Nei commenti qui sotto troverai alcuni suggerimenti. Uno appena aggiunto da @anilyeni potrebbe valere qualche indagine in più:

Come ho notato, autocomplete="off"funziona su Chrome 80, se sono presenti meno di 3 elementi <form>. Non so quale sia la logica o dove sia la relativa documentazione.

Anche questo di @dubrox può essere rilevante, anche se non l'ho testato:

grazie mille per il trucco, ma ti preghiamo di aggiornare la risposta, poiché display:none;non funziona più, ma position: fixed;top:-100px;left:-100px; width:5px;funziona :)

Aggiornamento APRILE 2020

Un valore speciale per Chrome per questo attributo sta facendo il lavoro: (testato sull'input - ma non da me) autocomplete="chrome-off"

Dopo mesi e mesi di lotta, ho scoperto che la soluzione è molto più semplice di quanto tu possa immaginare:

Invece di autocomplete="off"usare autocomplete="false";)

Semplice come quello, e funziona come un fascino anche su Google Chrome!

Aggiornamento di agosto 2019 (credito a @JonEdiger nei commenti)

Nota: molte informazioni online dicono che i browser ora trattano autocomplete = 'false' come gli stessi di autocomplete = 'off'. Almeno in questo momento, impedisce il completamento automatico di questi tre browser.

Impostalo a livello di modulo e quindi per gli input che desideri disattivarlo, imposta un valore non valido come 'none':

<form autocomplete="off"> 
  <input type="text" id="lastName" autocomplete="none"/> 
  <input type="text" id="firstName" autocomplete="none"/>
</form>

A volte nemmeno autocomplete=offimpedire di compilare le credenziali in campi errati.

Una soluzione alternativa è disabilitare il riempimento automatico del browser utilizzando la modalità di sola lettura e impostare lo stato attivo scrivibile:

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

L' focusevento si verifica con clic del mouse e tabulazione tra i campi.

Aggiornare:

Mobile Safari imposta il cursore sul campo, ma non mostra la tastiera virtuale. Questa nuova soluzione alternativa funziona come prima, ma gestisce la tastiera virtuale:

<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();  }" />

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

// UpdateEnd

Spiegazione: Il browser inserisce automaticamente le credenziali nel campo di testo errato?

riempire gli input in modo errato, ad esempio riempire l'input del telefono con un indirizzo e-mail

A volte noto questo strano comportamento su Chrome e Safari, quando ci sono campi password nella stessa forma. Suppongo che il browser cerchi un campo password per inserire le credenziali salvate. Quindi compila automaticamente il nome utente nel campo di input simile al testo più vicino, che appare prima del campo della password in DOM (solo indovinando a causa dell'osservazione). Poiché il browser è l'ultima istanza e non puoi controllarlo,

Questa soluzione di sola lettura sopra ha funzionato per me.

Se stai implementando una funzione della casella di ricerca, prova a impostare l' typeattributo searchcome segue:

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

Questo funziona per me su Chrome v48 e sembra essere un markup legittimo:

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

Prova questo. So che la domanda è piuttosto vecchia, ma questo è un approccio diverso al problema.

Ho anche notato che il problema arriva appena sopra il passwordcampo.

Ho provato entrambi i metodi come

<form autocomplete="off">e <input autocomplete="off">nessuno di loro ha funzionato per me.

Quindi l'ho corretto usando lo snippet di seguito: ho appena aggiunto un altro campo di testo appena sopra il campo del tipo di password e l'ho fatto display:none.

Qualcosa come questo:

<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="" />

Spero che possa aiutare qualcuno.

Non so perché, ma questo mi ha aiutato e ha funzionato.

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

Non ho idea del perché, ma autocompelete = "new-password" disabilita il riempimento automatico. Ha funzionato nell'ultima versione cromata 49.0.2623.112 .

Per me semplice

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

Fatto.

Testato su più versioni, l'ultimo tentativo è stato il 56.0.2924.87

Devi aggiungere questo attributo:

autocomplete="new-password"

Link alla fonte: articolo completo

È così semplice e complicato :)

google chrome fondamentalmente cerca ogni primo elemento password visibile all'interno di <form>, <body>e <iframe>tag per abilitare il riempimento automatico per loro, quindi per disabilitare questo è necessario aggiungere un elemento password fittizio come il seguente:

1. • se l'elemento password all'interno di un <form>tag è necessario inserire l'elemento fittizio come primo elemento nel modulo immediatamente dopo il <form>tag aperto

   • se il tuo elemento password non all'interno di un <form>tag inserisci l'elemento fittizio come primo elemento nella tua pagina html immediatamente dopo il <body>tag aperto

2. È necessario nascondere l'elemento fittizio senza usare css, display:nonequindi in pratica utilizzare quanto segue come elemento password fittizio.

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

Ecco le mie soluzioni proposte, dal momento che Google sta insistendo per ignorare ogni soluzione che le persone sembrano fare.

Opzione 1: selezionare tutto il testo al clic

Imposta i valori degli input su un esempio per il tuo utente (ad es. your@email.com) O sull'etichetta del campo (ad es. Email) E aggiungi una classe chiamata focus-selectai tuoi input:

<input type="text" name="email" class="focus-select" value="your@email.com">
<input type="password" name="password" class="focus-select" value="password">

Ed ecco il jQuery:

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

Non riesco davvero a vedere Chrome che fa mai casino con i valori. Sarebbe folle. Quindi speriamo che questa sia una soluzione sicura.

Opzione 2: imposta il valore dell'e-mail su uno spazio, quindi eliminalo

Supponendo di avere due input, come e-mail e password, impostare il valore del campo e-mail su " "(uno spazio) e aggiungere l'attributo / valore autocomplete="off", quindi deselezionarlo con JavaScript. È possibile lasciare vuoto il valore della password.

Se l'utente non ha JavaScript per qualche motivo, assicurati di tagliare il suo lato server di input (probabilmente dovresti esserlo comunque), nel caso in cui non eliminasse lo spazio.

Ecco il jQuery:

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

Ho impostato un timeout 15perché 5sembrava funzionare occasionalmente nei miei test, quindi triplicare questo numero sembra una scommessa sicura.

Se non si imposta il valore iniziale su uno spazio, Chrome lascia l'input come giallo, come se lo avesse riempito automaticamente.

Opzione 3: input nascosti

Metti questo all'inizio del modulo:

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

CSS:

.hide{ display:none; }

Assicurati di conservare la nota HTML in modo che gli altri sviluppatori non la cancellino! Assicurati anche che il nome dell'input nascosto sia pertinente.

Usa css text-security: disc senza usare type = password .

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;
}

In alcuni casi, il browser continuerà a suggerire i valori di completamento automatico anche se l'attributo di completamento automatico è disattivato. Questo comportamento inaspettato può essere abbastanza sconcertante per gli sviluppatori. Il trucco per forzare davvero il non completamento automatico è quello di assegnare una stringa casuale all'attributo , ad esempio:

autocomplete="nope"

Ho scoperto che l'aggiunta di questo a un modulo impedisce a Chrome di utilizzare il riempimento automatico.

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

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

Davvero deludente che Chrome abbia deciso di sapere meglio dello sviluppatore su quando completare il Completamento automatico. Ha una vera atmosfera Microsoft.

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

l'aggiunta dell'attributo readonly al tag insieme all'evento onfocus rimuovendolo risolve il problema

Per le combinazioni di password nome utente questo è un problema facile da risolvere. L'euristica di Chrome cerca il modello:

<input type="text">

seguito da:

<input type="password">

Basta interrompere questo processo invalidando questo:

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

Mike Nelsons ha fornito la soluzione non funzionava per me in Chrome 50.0.2661.102 m. Semplicemente aggiungendo un elemento di input dello stesso tipo con display: none set non disabilita più il completamento automatico del browser nativo. È ora necessario duplicare l'attributo name del campo di input su cui si desidera disabilitare il completamento automatico.

Inoltre, per evitare di duplicare il campo di input quando si trovano all'interno di un elemento del modulo, è necessario posizionare un elemento disabilitato sull'elemento che non viene visualizzato. Ciò impedirà che tale elemento venga inviato come parte dell'azione del modulo.

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

Nel 2016 Google Chrome ha iniziato a ignorare autocomplete=offsebbene sia nel W3C. La risposta che hanno pubblicato :

La parte difficile qui è che da qualche parte lungo il percorso del web il completamento automatico = off diventa un valore predefinito per molti campi del modulo, senza che si pensi al fatto che ciò sia positivo per gli utenti. Ciò non significa che non ci siano casi molto validi in cui non si desidera che i dati di compilazione automatica del browser (ad esempio sui sistemi CRM), ma nel complesso, li consideriamo come casi di minoranza. Di conseguenza, abbiamo iniziato a ignorare il completamento automatico = off per i dati di Compilazione automatica di Chrome.

Il che in sostanza dice: sappiamo meglio cosa vuole un utente.

Hanno aperto un altro bug per pubblicare casi d'uso validi quando è richiesto il completamento automatico = off

Non ho riscontrato problemi connessi al completamento automatico in tutta la mia applicazione B2B, ma solo con l'inserimento di un tipo di password.

Riempi automaticamente se c'è un campo password sullo schermo anche nascosto. Per rompere questa logica, puoi mettere ogni campo password nella sua forma se non rompe la tua logica di pagina.

<input type=name >

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

Se hai problemi con il mantenimento dei segnaposto ma disabilitando il riempimento automatico di Chrome ho trovato questa soluzione alternativa.

Problema

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/

L'esempio sopra produce ancora il problema di compilazione automatica, ma se usi il required="required"CSS e alcuni CSS puoi replicare i segnaposto e Chrome non raccoglierà i tag.

Soluzione

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/

Non mi piaceva davvero fare campi nascosti, penso che renderlo così diventerà molto confuso molto velocemente.

Sui campi di input che si desidera interrompere dal completamento automatico funzionerà. Rendi i campi di sola lettura e, a fuoco, rimuovi questo attributo in questo modo

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

quello che fa è che devi prima rimuovere l' attributo di sola lettura selezionando il campo e in quel momento molto probabilmente sarai popolato con il tuo input dell'utente e chinando il riempimento automatico per prendere il controllo

I valori immessi in precedenza memorizzati nella cache di Chrome vengono visualizzati come elenco di selezione a discesa. Questo può essere disabilitato con il completamento automatico = off, l'indirizzo salvato esplicitamente nelle impostazioni avanzate di Chrome fornisce il popup di riempimento automatico quando viene attivato un campo indirizzo. Questo può essere disabilitato con il completamento automatico = "false" Ma consentirà a Chrome di visualizzare i valori memorizzati nella cache nel menu a discesa.

Su un campo html di input che segue si spengono entrambi.

Role="presentation" & autocomplete="off"

Durante la selezione dei campi di input per la compilazione automatica dell'indirizzo Chrome ignora quei campi di input che non hanno l'elemento html etichetta precedente.

Per garantire che il parser Chrome ignori un campo di input per il popup dell'indirizzo di riempimento automatico, è possibile aggiungere un pulsante nascosto o un controllo immagine tra etichetta e casella di testo. Ciò interromperà la sequenza di analisi cromata della creazione della coppia di etichette in ingresso per il riempimento automatico. Le caselle di controllo vengono ignorate durante l'analisi dei campi indirizzo

Chrome considera anche l'attributo "for" sull'elemento etichetta. Può essere utilizzato per interrompere la sequenza di analisi di Chrome.

Bene, dato che tutti abbiamo questo problema, ho investito del tempo per scrivere un'estensione jQuery funzionante per questo problema. Google deve seguire il markup html, non seguiamo 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);

Aggiungilo a un file come /js/jquery.extends.js e includilo oltre jQuery. Applicalo a ciascun elemento del modulo al caricamento del documento in questo modo:

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

jsfiddle con i test

Prova il seguente jQuerycodice che ha funzionato per me.

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

Ci sono due pezzi per questo. Chrome e altri browser memorizzeranno i valori precedentemente immessi per i nomi dei campi e forniranno all'utente un elenco di completamento automatico in base a ciò (in particolare, gli input del tipo di password non vengono mai ricordati in questo modo, per motivi abbastanza ovvi). Puoi aggiungere autocomplete="off"per evitare ciò su cose come il tuo campo e-mail.

Tuttavia, hai quindi compilatori di password. La maggior parte dei browser ha le proprie implementazioni integrate e ci sono anche molte utility di terze parti che forniscono questa funzionalità. Questo, non puoi fermarti. Questo è l'utente che fa la propria scelta per salvare queste informazioni da compilare automaticamente in un secondo momento ed è completamente al di fuori dell'ambito e della sfera di influenza dell'applicazione.

Secondo la segnalazione bug Chromium n. 352347 Chrome non rispetta piùautocomplete="off|false|anythingelse" , né sui moduli né sugli input.

L'unica soluzione che ha funzionato per me è stata l' aggiunta di un campo password fittizio :

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

Impostando autocompletesu offdovrebbe funzionare qui ho un esempio che viene utilizzato da Google nella pagina di ricerca. Ho trovato questo da ispezionare elemento.

modifica : se offnon funziona, prova falseo nofill. Nel mio caso funziona con la versione 48.0 di Chrome

Ecco un trucco sporco -

Hai il tuo elemento qui (aggiungendo l'attributo disabilitato):

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

E poi in fondo alla tua pagina web metti un po 'di JavaScript:

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

Soluzione diversa, basata su webkit. Come già accennato, ogni volta che Chrome trova un campo password completa automaticamente l'e-mail. AFAIK, questo è indipendentemente dal completamento automatico = [qualunque cosa].

Per aggirare questo, modificare il tipo di input in testo e applicare il carattere di sicurezza del webkit in qualsiasi forma desiderata.

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

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

Da quello che posso vedere questo è sicuro almeno quanto input type = password, è copia e incolla sicuro. Tuttavia è vulnerabile rimuovendo lo stile che rimuoverà gli asterischi, ovviamente input = password può essere facilmente cambiata in input type = testo nella console per rivelare eventuali password compilate automaticamente, quindi è praticamente lo stesso.

L'unico modo per me era: (richiesto jQuery)

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

Ho affrontato lo stesso problema. Ed ecco la soluzione per disabilitare la compilazione automatica di nome utente e password su Chrome (appena testato solo con Chrome)

    <!-- 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">