risposta-alla-domanda-sullo-sviluppo-web-bd.com

Disattivazione del riempimento automatico di Chrome

Ho riscontrato problemi con il comportamento di riempimento automatico di Chrome su diverse forme.

I campi nel modulo hanno tutti nomi molto comuni e accurati, come "email", "nome" o "password", e hanno anche autocomplete="off" set.

Il contrassegno di completamento automatico ha disabilitato correttamente il comportamento del completamento automatico, in cui appare un elenco a discesa quando inizi a digitare, ma non ha modificato i valori in cui Chrome esegue automaticamente la compilazione automatica dei campi.

Questo comportamento sarebbe ok tranne che chrome sta riempiendo gli input in modo errato, ad esempio riempiendo l'input del telefono con un indirizzo email. I clienti si sono lamentati di questo, quindi è stato verificato che si verifichi in più casi e non come una sorta di risultato per qualcosa che ho fatto localmente sulla mia macchina.

L'unica soluzione corrente che riesco a pensare è generare dinamicamente nomi di input personalizzati e quindi estrarre i valori sul back-end, ma questo sembra un modo abbastanza hacky per risolvere questo problema. Ci sono tag o stranezze che modificano il comportamento di riempimento automatico che potrebbe essere utilizzato per risolvere questo problema?

620
templaedhel

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

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

Post scriptum non dimenticare di usare nomi univoci per diversi campi per impedire il riempimento automatico.

738
tibalt

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 in il campo prima qualsiasi campo type=password. Non importa cosa viene chiamato il campo - assume il campo prima che la password diventi il ​​tuo nome utente.

Vecchia soluzione

Basta usare <form autocomplete="off"> e impedisce il prefilling della password e qualsiasi tipo di riempimento euristico dei campi in base alle ipotesi che un browser può fare (che sono spesso errate). Al contrario di usare <input autocomplete="off"> che sembra essere praticamente ignorato dalla compilazione automatica della password (in Chrome, cioè, Firefox obbedisce).

Soluzione aggiornata

Chrome ora ignora <form autocomplete="off">. Quindi la mia soluzione originale (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.

Ricordati 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 ricordare che il nostro team lo sta usando da anni su dozzine di progetti. Funziona ancora bene nonostante alcuni commenti qui sotto. Non ci sono problemi con l'accessibilità perché i campi sono display:none, il che significa che non ottengono l'attenzione. Come ho detto, devi metterli prima di i tuoi campi reali.

Se stai usando javascript per modificare il tuo modulo, c'è un trucco extra di cui avrai bisogno. Mostra i campi falsi mentre stai manipolando il modulo e poi nascondi di nuovo un millisecondo dopo.

Esempio di codice usando jQuery (assumendo che tu dia ai tuoi campi falsi una classe):

        $(".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 duramente. Ma ci hanno gettato un osso sotto forma di:

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

Questo funziona e risolve principalmente il problema.

Tuttavia, non funziona quando non hai un campo password ma solo un indirizzo email. Questo può anche essere difficile da far smettere di andare giallo e precompilare. La soluzione dei campi falsi può essere utilizzata per risolvere questo problema.

In effetti a volte hai bisogno di inserire due lotti di campi falsi e provarli in posti diversi. Ad esempio, avevo già dei campi falsi all'inizio del mio modulo, ma di recente Chrome ha iniziato a precompilare nuovamente il campo "Email", quindi ho raddoppiato e inserito più campi falsi appena prima del campo "Email" e l'ho risolto . Rimuovendo il primo o il secondo lotto dei campi si ripristina la compilazione automatica troppo esagerata.

593
mike nelson

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

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

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

217
Kaszoni Ferencz

A volte anche autocomplete=off non impedisce di inserire le credenziali nei campi sbagliati.

Una soluzione alternativa è disabilitare la compilazione automatica del browser utilizzando la modalità readonly e impostando il valore scrivibile sullo stato attivo:

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

L'evento focus si verifica con i clic del mouse e la tabulazione attraverso i campi.

Aggiornare:

Mobile Safari imposta il cursore nel campo, ma non mostra la tastiera virtuale. Questa nuova soluzione 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();  }" />

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

// UpdateEnd

Spiegazione: Auto browser riempie le credenziali in un campo di testo errato?

riempiendo gli ingressi in modo errato, ad esempio riempiendo l'ingresso del telefono con un indirizzo e-mail

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

Questa correzione di sola lettura sopra ha funzionato per me.

97
dsuess

Prova questo. So che la domanda è un po 'vecchia, ma questo è un approccio diverso per il problema.

Ho anche notato che il problema si verifica appena sopra il campo password.

Ho provato entrambi i metodi come

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

Quindi l'ho risolto usando lo snippet seguente: ho appena aggiunto un altro campo di testo appena sopra il campo del tipo di password e l'ho reso 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.

62
Jobin Jose

Se stai implementando una funzione di casella di ricerca, prova a impostare l'attributo type su search come 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

54
dana

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

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

Non ho idea del perché, ma autocompelete = "new-password" disabilita il riempimento automatico. Ha funzionato nella versione più recente 49.0.2623.112 di Chrome.

44
Tauras

Per me, semplice

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

Fatto.

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

43
Kuf

Devi aggiungere questo attributo:

autocomplete="new-password"

Link alla fonte: Articolo completo

22
Hitesh Kalwani

È così semplice e complicato :)

google chrome cerca fondamentalmente ogni primo elemento della password visibile all'interno dei tag <form>, <body> e <iframe> per abilitare il refill automatico per loro, quindi per disabilitarlo devi aggiungere un elemento fittizio password come segue:

    • se il tuo elemento password all'interno di un tag <form> devi mettere l'elemento dummy come primo elemento nel tuo form subito dopo <form> apri tag

    • se il tuo elemento password non all'interno di un tag <form>, metti l'elemento dummy come il primo elemento nella tua pagina html immediatamente dopo <body> apri tag

  1. Devi nascondere l'elemento dummy senza usare css display:none quindi in pratica usa quanto segue come elemento fittizio della password.

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

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

Opzione 1: seleziona tutto il testo al clic

Imposta i valori degli input su un esempio per il tuo utente (ad esempio [email protected]) o sull'etichetta del campo (ad esempio Email) e aggiungi una classe chiamata focus-select ai tuoi input:

<input type="text" name="email" class="focus-select" value="[email protected]">
<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 che Chrome abbia mai modificato i valori. Sarebbe pazzo. Quindi spero che questa sia una soluzione sicura.

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

Supponendo che hai due input, come email e password, imposta il valore del campo email su " " (uno spazio) e aggiungi l'attributo/valore autocomplete="off", quindi deselezionalo con JavaScript. Puoi lasciare il valore della password vuoto.

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

Ecco la jQuery:

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

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

Se non si imposta il valore iniziale su uno spazio, Chrome viene visualizzato in giallo lasciando l'input come se fosse stato 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 mantenere la nota HTML in modo che gli altri sviluppatori non la cancellino! Assicurati anche che il nome dell'ingresso nascosto sia pertinente.

17
rybo111

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

autocomplete="nope"
14

Ho notato 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 per il fatto che Chrome abbia deciso di sapere meglio dello sviluppatore quando eseguire il completamento automatico. Ha una vera sensazione di Microsoft.

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

aggiungendo l'attributo readonly al tag insieme all'evento onfocus rimuovendolo si risolve il problema

11
Avindu Hewa

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

<input type="text">

seguito da:

<input type="password">

Rompa semplicemente questo processo invalidando questo:

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

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

La soluzione fornita da Mike Nelsons non ha funzionato 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 nome del campo di input in cui si desidera disabilitare il completamento automatico.

Inoltre, per evitare di duplicare il campo di immissione quando si trovano all'interno di un elemento del modulo, è necessario posizionare un elemento disattivato sull'elemento che non è visualizzato. Ciò impedirà l'invio di quell'elemento come parte dell'azione del modulo.

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

Nel 2016 Google Chrome ha iniziato a ignorare autocomplete=off sebbene sia in W3C. La risposta che hanno pubblicato :

La parte difficile è che da qualche parte lungo il percorso del web autocomplete = off diventa un valore predefinito per molti campi modulo, senza alcun reale pensiero se sia o meno adatto agli utenti. Ciò non significa che non vi siano casi molto validi in cui non si desidera che i dati di riempimento automatico del browser (ad esempio nei sistemi CRM), ma in generale, li consideriamo come casi di minoranza. Di conseguenza, abbiamo iniziato a ignorare il completamento automatico = disattivato per i dati di riempimento automatico di Chrome.

Che sostanzialmente dice: conosciamo meglio ciò che un utente vuole.

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

Non ho visto problemi connessi con il completamento automatico attraverso tutta la mia applicazione B2B ma solo con l'input di un tipo di password.

La compilazione automatica interviene se c'è qualche campo password sullo schermo anche nascosto. Per rompere questa logica, puoi inserire ogni campo password nella sua propria forma se non infrange la tua logica di pagina.

<input type=name >

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

Se riscontri problemi con la conservazione dei segnaposto ma disabilita la funzione di 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 mostra ancora il problema del riempimento automatico, ma se utilizzi required="required" e alcuni CSS puoi replicare i segnaposto e Chrome non rileverà 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/

7
Ryan Grush

I valori inseriti in precedenza memorizzati in cache da chrome vengono visualizzati come elenco di selezione a discesa. Questo può essere disabilitato da autocomplete = off, l'indirizzo salvato in modo esplicito nelle impostazioni avanzate di chrome offre il riempimento automatico quando un campo indirizzo diventa attivo. Questo può essere disabilitato con autocomplete = "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 l'autofill automatico, Chrome ignora quei campi di input che non hanno l'elemento html dell'etichetta precedente.

Per garantire che il parser di Chrome ignori un campo di input per l'popup di compilazione automatica, è possibile aggiungere un pulsante nascosto o un controllo immagine tra l'etichetta e la casella di testo. Questo interromperà la sequenza di parsing cromatica della creazione di coppie in-label per la compilazione automatica. Le caselle di controllo vengono ignorate durante l'analisi dei campi dell'indirizzo

Chrome considera anche l'attributo "for" sull'elemento label. Può essere usato per rompere la sequenza di parsing di chrome.

6
Momin

Impostando autocomplete a off dovrebbe funzionare qui ho un esempio che viene utilizzato da google nella pagina di ricerca. L'ho trovato da un elemento di ispezione.

enter image description here

modifica : Nel caso in cui off non funzioni, prova false o nofill. Nel mio caso funziona con la versione 48.0 di Chrome

6
mumair

Bene visto 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);

Basta aggiungere questo in un file come /js/jquery.extends.js e includerlo dopo jQuery. Applicalo a ogni elemento del modulo al caricamento del documento in questo modo:

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

jsfiddle con test

6
MagicSux

Non mi piaceva davvero creare campi nascosti, penso che renderlo così possa diventare davvero molto complicato.

Nei campi di input che desideri interrompere dal completamento automatico, funzionerà. Rendi i campi di sola lettura e in primo piano rimuovi quell'attributo come questo

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

ciò che fa è che devi prima rimuovere l'attributo read only selezionando il campo e in quel momento molto probabilmente verrà compilato con il tuo input utente e curvo il riempimento automatico per prendere il sopravvento

6
MZaragoza

Ci sono due pezzi per questo. Chrome e altri browser ricorderanno i valori inseriti in precedenza per i nomi dei campi e forniranno all'utente un elenco di completamento automatico (in particolare, gli input del tipo di password sono never ricordato in questo modo, per ragioni abbastanza ovvie). Puoi aggiungere autocomplete="off" per impedirlo su cose come il tuo campo email.

Tuttavia, hai quindi riempitivi password. La maggior parte dei browser ha le proprie implementazioni integrate e ci sono anche molte utilità di terze parti che forniscono questa funzionalità. Questo, tu non puoi fermarsi. 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 della propria applicazione.

6
Chris Pratt

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

Per aggirare questo cambiamento, inserisci il testo in input e applica il carattere di sicurezza del webkit in qualsiasi forma desideri.

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

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

Da quello che posso vedere questo è sicuro almeno quanto il tipo di input = password, è copia e incolla sicuro. Tuttavia è vulnerabile rimuovendo lo stile che rimuoverà gli asterischi, ovviamente il tipo di input = password può essere facilmente modificato in input type = text nella console per rivelare tutte le password autofilled quindi è praticamente la stessa cosa.

5
Michael.

Come per segnalazione bug di Chromium # 352347 Chrome non rispetta più autocomplete="off|false|anythingelse", né su moduli né su input.

L'unica soluzione che ha funzionato per me era di aggiungere un campo password fittizio :

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

Ecco un trucco sporco -

Hai qui il tuo elemento (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>
5
hyper_st8

Prova il seguente codice jQuery che ha funzionato per me.

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

Invece di "questo è ciò che ha funzionato per me" risposte e altre risposte che sembrano hack completi ... Questo è il modo in cui chrome (e le ultime specifiche) gestiranno gli attributi autocomplete sugli elementi input:

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

TLDR: aggiungi autocomplete='<value>' sui tuoi input, dove <value> dovrebbe essere una qualsiasi stringa che definisce a cosa serve il campo. Funziona in modo simile all'attributo name. Utilizza i valori suggeriti sul link qui sopra, ove possibile.

Inoltre, rimuovere l'attributo di completamento automatico dal modulo

4
Deminetix

L'unico modo che funziona per me è stato: (jQuery richiesto)

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

Ho affrontato lo stesso problema. Ed ecco la soluzione per disabilitare il nome utente e la password di auto-riempimento su Chrome (solo testati con Chrome solo)

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

prova con uno spazio vuoto nel valore:

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

chrome 54.0.2840.59

3
Isaac Limón

La soluzione più recente di aggiungere autocomplete="new-password" al campo della password funziona in modo ottimale per impedire a Chrome di autofilling.

Tuttavia, come sottolineato da sibbl, ciò non impedisce a Chrome di chiedere all'utente di salvare la password dopo il completamento dell'invio del modulo. A partire da Chrome 51.0.2704.106, ho scoperto che è possibile farlo aggiungendo un campo password fittizio invisibile che ha anche l'attributo autocomplete="new-password". Nota che "display: none" non funziona in questo caso. per esempio. Aggiungi qualcosa come questo prima del campo della password reale:

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

Questo ha funzionato solo per me quando ho impostato la larghezza su un valore diverso da zero. Grazie a tibalt e namrouti per le risposte originali.

2
CodeSimian

La mia soluzione, poiché nessuno dei precedenti sembra funzionare in Chrome 63 e oltre

Ho risolto questo problema sul mio sito sostituendo l'elemento di input offendente con

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

e usando jQuery per compilare un campo nascosto prima dell'invio.

Ma questo è un trucco davvero terribile reso necessario da una cattiva decisione in Chromium.

2
lufc

Ho finalmente trovato il successo usando un textarea. Per un campo password c'è un gestore di eventi che sostituisce ogni carattere digitato con un "•".

2
eug

Avevo bisogno di alcuni campi extra perché funzionasse correttamente, dato che Chrome riempie molti campi. E avevo anche bisogno di nascondere i campi in un modo più elegante del display: nessuno per farlo funzionare.

<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

Come ha detto il Dvd Franco, per me solo il completamento automatico = 'off' in tutti i campi ha funzionato. Così ho messo queste regole jquery in $ (document) .ready (); funzione sul mio file .js principale

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

La mia soluzione dipende da tre cose:

  1. evento di keydown
  2. mascherando il nome del campo
  3. cancellazione dei valori dei campi su submit

Prima di tutto, dobbiamo impedire il completamento automatico sia del nome utente che della password, quindi inizialmente imposteremo due flag, i -> username e j -> passowrd con valore true, quindi senza alcun keydown per i campi entrambi i e j saranno vero.

Nel caso di maggio il mascheramento del campo è avvenuto sul lato server, passando una stringa casuale, potrebbe essere reso facilmente realizzabile anche dal lato client.

Questo è il codice:

$(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(''); 

 })
})

Ecco l'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>

La soluzione di cui sopra, infatti, non eliminerà o impedirà il completamento automatico del nome utente e della password, ma renderà tale autocompletamento inutile. Senza premere il tasto della tastiera sul campo, il valore del campo sarà vuoto prima dell'invio, quindi all'utente verrà chiesto di inserirli.

Aggiornare

Possiamo, inoltre, utilizzare l'evento click per impedire il completamento automatico dall'elenco degli utenti apparso sotto il campo come il seguente:

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

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

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

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

})

Limitazioni:

Questa soluzione potrebbe non funzionare come previsto nei dispositivi touch screen.

Aggiornamento finale

Ho eseguito la seguente implementazione pulita come la seguente:

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

Su Chromium 53.0.2785.92 (64 bit) ha funzionato quanto segue

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

display:none non funziona

1
michalzuber

Quindi a quanto pare le migliori correzioni/hack per questo ora non funzionano più, ancora. La versione di Chrome che utilizzo è la versione 49.0.2623.110 me i moduli di creazione del mio account ora mostrano un nome utente e una password salvati che non hanno nulla a che fare con il modulo. Grazie Chrome! Altri hack sono sembrati orribili, ma questo hack è meno orribile ...

Perché abbiamo bisogno che questi hack funzionino è perché queste forme sono generalmente forme di creazione di account, ad esempio non un modulo di accesso che dovrebbe essere permesso di inserire la password. Moduli per la creazione di account che non vuoi la seccatura di eliminare nome utente e password. Logicamente ciò significa che il campo della password non verrà mai popolato sul rendering. Quindi uso una casella di testo e un po 'di 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>

Trovo che ciò sia accettabile in quanto un utente non può accedere a un campo password entro un breve periodo di tempo e la pubblicazione sul server non fa alcuna differenza se il campo è un campo password in quanto viene comunque restituito in testo normale.

Avvertenza: se, come me, si utilizza la stessa forma di creazione di un modulo di aggiornamento, le cose potrebbero risultare complicate. Io uso mvc.asp c # e quando uso @ Html.PasswordFor () la password non viene aggiunta alla casella di input. Questa è una buona cosa. Ho codificato questo. Ma usando @ Html.TextBoxFor () e la password verrà aggiunta alla casella di input e quindi nascosta come password. Tuttavia, con le hash up delle password, la password nella casella di input è la password hash up e non dovrebbe mai essere reinserita sul server: salvare accidentalmente una password hash con hash sarebbe un problema per qualcuno che cerca di accedere. Fondamentalmente .. Ricordarsi di impostare la password su una stringa vuota prima che la casella di input venga visualizzata se si utilizza questo metodo.

1
Colin Wiseman

Nel caso in cui display: none non funzioni, anche questo è possibile e sembra funzionare (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

Finalmente penso di essere arrivato con una soluzione decente. Capire meglio come funziona il menu a discesa con Chrome ha aiutato :) Fondamentalmente, il menu a discesa verrà visualizzato quando si concentra l'input e quando si genera un evento mouse down quando si digita una voce che corrisponde a ciò che Chrome ha in memoria. Tenendo presente ciò, e che Chrome lo fa per determinati input quando hanno nomi predefiniti come "nome", "email", ecc., Dobbiamo solo rimuovere il nome quando verrà visualizzato il menu a discesa e aggiungerlo nuovamente dopo :) Volevo utilizzare una soluzione che potesse farlo funzionare semplicemente aggiungendo il completamento automatico degli attributi. Pensavo che avesse un senso. Questo è il codice:

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

Soluzione 2 (My Favorite One)

La soluzione che ho descritto sopra rimuoverà il nome dell'input fino a quando non togliamo la messa a fuoco (sfocatura), in quel momento verrà ripristinato il nome originale. Ma potrebbe succedere che siamo interessati ad avere accesso all'input tramite il suo attributo name mentre stiamo digitando. Il che significa che dobbiamo rimettere il nome subito dopo ogni input. Questa soluzione, fondamentalmente si basa sulla prima soluzione. In questo caso, aggiungeremo il nome sul tasto in basso e lo rimetteremo in keyup. Penso che questo sia più accurato per la compatibilità con ciò che dovrebbe essere il comportamento di "completamento automatico". Comunque questo è il codice:

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

Si prega di notare che per la soluzione 1 e 2, ho appena preso i casi in cui il nome di input è "nome" e "email". Per qualsiasi altro caso in cui questo attributo faccia sì che Chrome generi il menu a discesa, dovrai aggiungerlo nel selettore per l'evento del mouse verso il basso.

Soluzione 3

Questa soluzione è molto più complicata. Non mi sono reso conto che il comportamento che stiamo cercando di correggere si basa solo su quegli input con un nome specifico come "nome, email, ecc". L'approccio di questa soluzione era per quel caso che Chrome mostrava altri nomi che non conosciamo a priori. Sarebbe una soluzione molto generica. Non mi piace quanto gli altri 2, fondamentalmente perché potrebbe esserci un piccolo sfarfallio quando premiamo sul tasto cancella. Spiegherò quel muggito.

Ho scoperto che il menu a discesa appariva dopo un secondo clic sull'input ma non sul primo clic quando si concentra la prima volta sull'input. Lego un evento "mousedown" per tutti questi elementi in cui il gestore rileva fondamentalmente se è già focalizzato sull'input e nel caso in cui rilevi un altro "mouse down", forza un .blur () e poi .focus () dopo, impedendo il menu a discesa sul secondo clic una volta messo a fuoco. Spero, è chiaro, nel caso in cui qui sia il codice che ho usato:

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

D'altra parte, al fine di prevenire il dropdown mentre stai digitando nel caso in cui corrisponda ai suggerimenti di Chrome ... Questo è un po 'complicato. Ho appena deciso di sostituire il comportamento predefinito di un input mentre i tipi di utenti. Il menu a discesa valuta l'input al puntatore del mouse, quindi prevengo il comportamento predefinito per alfanumerici, spazio, ecc. L'unico problema è con Command, Ctrl e delete. In questo caso ho dovuto associare anche un evento al mouse. Permette il comportamento predefinito nei primi due casi in modo da poter copiare, incollare o selezionare tutto. Nel caso dell'eliminazione, devo consentire il comportamento predefinito, ma se dopo aver eliminato un carattere l'input corrisponde ai suggerimenti di Chrome, di nuovo mostrava il menu a discesa. Per questo caso ho dovuto usare lo stesso trucco di sfocatura e messa a fuoco. L'unico inconveniente che ho trovato su questo è che poiché stiamo cancellando il comportamento su keyup e chrome tenta di mostrarlo su keydown, c'è un piccolo sfarfallio. Ad ogni modo, questo è il meglio che potrei fare. Probabilmente richiederà un filtraggio dei caratteri in un punto. Ho appena aggiunto che le condizioni erano più sensate per ora. Questa è la seconda parte del codice:

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

Come ho detto questa soluzione è molto più caotica. È stato il primo che ho usato fino a quando ho capito che il menu a discesa è apparso solo per alcuni nomi di input.

Scusa per aver scritto così tanto, volevo solo essere sicuro che tutto fosse chiaro. Spero possa essere d'aiuto.

1
Yared Rodriguez

Boom, Google Chrome e chiunque altro prova a sconfiggere questo allora.

Sono riuscito a farlo implementare oggi 7 settembre 2017, ma usando una FormCollection di stringhe casuali generate nella mia vista MVC.

Vorrei prima ottenere una nuova chiave casuale nel mio controller di indice della mia pagina di login, crittografare e creare una nuova stringa casuale totalmente unica (ho effettivamente usato una crittografia a 256 bit per eseguire questa operazione, e una chiave di crittografia e autenticazione univoca), quindi aggiungo testo semplice 'Username' e 'Password' alla fine di ogni stringa per aiutarmi in seguito a identificare dal controller di visualizzazione repsonding il nome utente e la password. Puoi anche cambiare quella semplice stringa in qualsiasi cosa, purché tu conosca il modello ed è unico.

Dal mio punto di vista, ho quindi usato queste variabili in modo appropriato e quindi nel controller di risposta - cercato attraverso un FormCollection e trovato le mie variabili di corrispondenza - e poi ho usato il valore-chiave di quell'elemento come Username e Password corrispondenti per elaborare in modo appropriato.

L'altro problema che ho avuto è che penso che sia subdolo di Chrome

Qualche idea ?

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

Penso che sia una soluzione alternativa, ma hey funziona, e penso che potrebbe anche essere a prova di futuro, a meno che Google determini che l'URL della pagina contiene parole chiave, quindi aggiunge giustamente le sue stupide estensioni in cima a qualsiasi campo di input - ma è un po 'drastico.

1
Jeffrey Holmes

Per Angular utenti:

Poiché autocomplete = 'off' ignora le nuove versioni di Chrome, lo sviluppatore di Chrome suggerisce il completamento automatico = 'false | random-string ', quindi i browser google chrome/modern hanno 2 tipi di utenti helper -

  1. autocomplete='off' (che impedisce l'ultimo suggerimento memorizzato nella cache).
  2. autocomplete = 'false | random-string' (che impedisce l'impostazione di riempimento automatico, poiché la "stringa casuale" non è conosciuta dal browser).

quindi cosa fare, in caso di disabilitare entrambi i suggerimenti fastidiosi? Ecco il trucco: -

  1. aggiungi autocomplete = 'off' in ogni campo di input. (o semplice Jquery).

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

  1. Rimuovi il tag <form name='form-name'> dal codice HTML e aggiungi ng-form = 'form-name' nel contenitore <div>. L'aggiunta di ng-form="form-name" manterrà anche tutte le convalide.
1
Karan Vyas

Ho provato tutti i consigli citati ma nessuno di loro ha funzionato. Sto usando un autocomplete di Google Places sull'input specifik, ed è piuttosto brutto se c'è un riempimento automatico di Google Chrome sopra l'elenco di completamento automatico di Google Places. Anche l'impostazione di autocomplete = "nulla" è inutile perché il plugin di autocomplete stesso imposta questo attr a "off" ed è completamente ignorato da chrome.

quindi la mia sollution è:

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

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

Soluzione HTML puro :

(Nessun javascript necessario, nessun css necessario e nessun input nascosto necessario)

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

Gli appunti:

  • la forma non deve necessariamente essere il genitore diretto dell'elemento di input
  • l'input ha bisogno di un attributo name
0
w3jimmy

Stavo avendo questo problema con una finestra modale "Accedi ora o registrati", ed è stato un problema se l'utente avesse salvato le proprie credenziali al browser. Sono stati compilati sia i campi di accesso che di registrazione, quindi sono stato in grado di cancellarli con la seguente direttiva angolare js:

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

È fondamentalmente la stessa di alcune delle risposte precedenti che avrebbero usato jquery, ma fatte in modo angolare.

0
David Adams

Se si utilizzano i moduli Symfony, autocomplete=off non funzionerà se l'attributo è applicato dal modello di ramoscello anziché utilizzare FormBuilder.

Usa questo:

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

Piuttosto che:

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

Quello che ho fatto per cambiare il tipo di input = "testo" su un ingresso multi linea cioè.

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

Una rapida spiegazione del codice: l'overflow-x e -y hidden wil disabilita i pulsanti di scorrimento sulla destra della casella textarea. L'algin vertiale allineerà l'elemento centrale verticale con l'area di testo e il ridimensionamento: nessuno disabiliterà il grabber di ridimensionamento in basso a destra dell'area di testo.

In essenza significa che la tua textarea apparirà come una casella di testo, ma con il riempimento automatico del cromato.

0
nawissor

So che questo non è esattamente rilevante, ma qui è quello che ho fatto. I campi auto-riempiti generano un evento 'change' ma solo se lo si lega a loro il prima possibile.

così ho messo questo nella sezione della testa.

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

e ha funzionato per me.

0
Hemant_Negi

Il mio trucco: testato in Chrome 48:

Poiché Chrome cerca di scoprire il tipo di campo è guardando cose come id o name attributi del <input>, ma anche al contenuto <label> associato, devi solo trovare nomi privi di significato per questi.

Per id e name, è facile scegliere qualcos'altro che non è elencato qui .

Per label, ho inserito un <span> invisibile nel mezzo, ad es. per una città (è un problema con il mio completamento automatico dei luoghi) :

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

Esempio operativo completo:

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

La risposta di Jobin Jose mi fece sussultare. Ecco cosa funziona per me:

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

Assicurati di non avere autocomplete = "off", che rovina la soluzione.

0
alehro

Il mio problema era che Chrome avrebbe compilato automaticamente il codice postale, tramite l'interfaccia di completamento automatico di Bootstrap, dato che ero in grado di suggerire possibili valori dal mio database.

Cose che dovevo fare:

  • Cambia la proprietà id del campo di immissione in qualcosa di diverso da "codice postale"
  • Cambia il valore autocomplete del campo di immissione in false
  • Dopo aver chiamato $('#postcode_field').autocomplete(...), ho dovuto resettare la proprietà autocomplete con $('#postcode_field').prop('autocomplete', 'false'); perché il plugin di autocomplete di Boostrap lo cambia automaticamente in off.
0
frin

Dal momento che display none non sembra funzionare più aggiungere il

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

all'interno di un div con overflow nascosto, max-width e max-height 0px

Quindi diventa qualcosa come:

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

Immettere un valore di '' (uno spazio vuoto) per il campo del nome utente.

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

Se stai compilando il nome utente con un valore inserito dall'utente, inserisci il codice per "" se non c'è un valore inserito dall'utente.

Modifica: ho anche dovuto modificare i campi "username" per avere un nome di qualcos'altro che "username", ad es. 'Nameofuser'

0
Geoff Kendall

Inoltre devi impostare il valore su empty (value = "") oltre a autocomplete = "off" per farlo funzionare.

0
Iamzozo

Il metodo per nasconderlo aggiungendo "display: none;" per l'input non ha funzionato per me se il modulo viene generato tramite javascript.

Così invece li ho resi invisibili mettendoli fuori dalla vista:

<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

Sfortunatamente nessuna delle soluzioni sembra funzionare. Sono stato in grado di cancellare la mail (username) usando

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

tecnica, ma la password continua a popolarsi.

0
Srini Kancharla

Aggiornamento del 20 gennaio sul cromo

Nessuna delle soluzioni precedenti, inclusa l'aggiunta di campi falsi o l'impostazione di completamento automatico = nuova password funziona. Sì, con questi Chrome non si completerà automaticamente, ma quando inserisci il campo della password ti suggerirà nuovamente la password.

Ho scoperto che se rimuovi il campo della password e lo aggiungi nuovamente senza un id , Chrome non lo riempie automaticamente e non suggerisce la password in ingresso.

Utilizzare una classe per ottenere il valore della password anziché un ID.

Per Firefox è ancora necessario aggiungere un elemento fittizio.

Questa soluzione consente anche di autorizzare/vietare il completamento automatico basato su un 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>

caricamento della pagina:

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();

quando hai bisogno della password:

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

Nessuna delle altre soluzioni a questa domanda ha funzionato per me.

L'unico pensiero che ha funzionato è questo :

Rimuove gli attributi "name" e "id" dagli elementi e li assegna dopo 1ms. Metti questo nel documento pronto.

$(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

Nessuna delle soluzioni ha funzionato per me. Alla fine, dopo aver tirato fuori i capelli per molte ore, mi sono inventato questa soluzione per ReactJS.

Testato su FireFox 54.0.1, Chrome 61.0.3163.100, Mac OS 10.13

Tengo il type="text" e lo cambio nel tipo pertinente sull'evento onChange.

ex: 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

La funzione di completamento automatico è stata disabilitata con successo tramite questo trucco. Funziona!

[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