autocomplete = ‘off’ non funziona quando il tipo di input è password e rende il campo di input sopra di esso per abilitare il completamento automatico

Ho un modulo con completamento automatico disabilitato ma non funziona e rende il completamento automatico abilitato in firefox e versione superiore di chrome

Quando il tipo viene modificato da password a testo, funziona in tutto il browser. Qualcuno può aiutare a risolvere questo problema?

Normalmente, i browser hanno due funzionalità correlate ma diverse per quanto riguarda i moduli:

  • Completamento automatico del modulo, in cui gli elementi di type (e simili) raccolgono i valori digitati e li restituiscono sotto forma di un elenco a discesa.
    (È una funzione semplice che funziona piuttosto bene.)

  • Gestione delle password, in cui il browser chiede di ricordare le combinazioni nome utente / password quando rileva che hai inviato un modulo di accesso. Quando si torna al sito, la maggior parte dei browser visualizza i nomi utente disponibili in una casella a discesa (Firefox, Chrome, Internet Explorer …) ma alcuni hanno un pulsante della barra degli strumenti (Opera). Inoltre, Chrome evidenzia i campi in giallo codificato.
    (Ciò dipende dall’euristica e potrebbe non riuscire su alcune pagine.)

C’è un caso limite con i moduli contrassegnati come autocomplete="off" . Cosa succede se si tratta di un modulo di accesso e l’utente ha precedentemente memorizzato un nome utente / password? In realtà la rimozione della password dal database locale sembra inappropriata, quindi probabilmente nessun browser lo fa. (Infatti, i dati del completamento automatico del modulo non vengono cancellati.) Firefox decide di dare energia all’utente: hai una password, quindi ti permetterò di usarla. Chrome decide di dare energia al sito.

Quando ho affrontato lo stesso problema, ho risolto creando una casella di testo temporanea sopra il campo della password e nasconderla

come questo,

 
  • ...

Renderà il campo di testo del username non mostrare le parole digitate in precedenza in un menu a discesa. Poiché non esiste un attributo come name , id per il campo di input non invierà alcun parametro aggiuntivo.

Non sono sicuro che questa sia una buona pratica, ma risolverà il problema.

Puoi semplicemente rendere il campo in sola lettura durante il caricamento del modulo. Mentre il campo diventa attivo puoi cambiare quel campo per essere modificabile. Questo è il modo più semplice per evitare il completamento automatico.

  

Ciò impedirà il riempimento automatico della password nel campo di immissione (type = “password”).

 

Basta aggiungere l’attributo autocomplete="new-password" al campo di immissione della password.

Per ulteriori informazioni sulla funzione di autocomplete : https://html.spec.whatwg.org/multipage/forms.html#attr-fe-autocomplete-new-password

Ecco un trucco che sembra funzionare in Firefox e Chrome.

In Firefox, avendo un campo di testo disabilitato poco prima che il campo della password sembra fare il trucco, anche se è nascosto (disabilitato: nessuno)

In Chrome, tuttavia, deve essere visibile.

Quindi suggerisco qualcosa del genere:

HTML:

   

CSS:

 input[type=text].password-autocomplete-disabler { position: absolute !important; left: -10000px !important; top: -10000px !important; } 

Recentemente mi sono trovato di fronte a questo problema e, in assenza di una soluzione semplice poiché i miei campi possono essere prepopolati, volevo condividere un trucco elegante che mi è venuto in mente impostando il tipo di password nell’evento pronto.

Non dichiarare il campo di immissione come password di tipo durante la sua creazione, ma aggiungi un listener di eventi pronto per aggiungerlo per te con jQuery:

   

L’aggiunta di autocomplete="off" non la taglierà: è ignorata da Chrome.

Modifica l’attributo del tipo di input su type="search" .
Google non applica il riempimento automatico agli input con un tipo di ricerca.

La mia soluzione ispirata qui è la seguente:

 
Username: Password:

E ‘sicuramente brutto, sembra mal riposto nel 2017, ma funziona e protegge il nome utente e il campo della password dal riempimento automatico. Si noti che in Firefox (versione 51 al momento della scrittura) non ha importanza un po ‘quale combinazione di name , id o autocomplete viene utilizzata, sia nei campi modulo o di input. Senza i primi due campi fittizi, il riempimento automatico avrà luogo in qualsiasi momento in cui il dominio del tempo è abbinato e rovinerà la giornata.

Ho appena trovato un’altra soluzione semplice e ha funzionato per me su tutti e 3 i principali browser Chrome Firefox e Opera

   

Quello che ha funzionato per me, era usare autocomplete = “new-password” solo in input type = “password”, come questo:

   

Indipendentemente da quanti input hanno la forma.

Ho provato tutti i tipi di soluzioni alternative, ma solo quella combinazione ha funzionato su tutti i browser nel mio caso:

  

Ed è anche una soluzione abbastanza pulita 🙂

Ho scoperto che se l’input non ha un nome (ad esempio l’attributo name non è impostato), il browser non può completare automaticamente il campo. So che questa non è una soluzione per tutti, ma se invii il modulo tramite AJAX, puoi provare questo.

Perché non tutti usano questo ….

  

È così semplice … 🙂

Il mio sol:

  function turnOnPasswordStyle(){ $('#inputpassword').attr('type', "password"); } 

So che questa è una vecchia domanda, ma i browser sono cambiati nel tempo. Anche se alcune delle risposte a questa domanda sono state citate qui: creare una casella di testo temporanea sopra il campo della password e nasconderlo potrebbe aver funzionato in passato, attualmente il modo più semplice per impedire al browser di spuntare il gestore delle password è di avere almeno tre ingressi password nascosti aggiuntivi separati, ciascuno con diversi valori fittizi, in questo modo:

 

Prova a impostare autocomplete = “new-password” come mostrato di seguito:

  

Per la password, non funziona al momento.

Quindi, per impostazione predefinita, imposta il campo della password come testo e usa il seguente codice js.

 $('#real-password').on('input', function(){ if ($(this).val() !== '') { $(this).attr('type', 'password'); } else { $(this).attr('type', 'text'); } }); 

autocomplete=off è largamente ignorato dai browser moderni, principalmente a causa di gestori di password, ecc.

Puoi provare ad aggiungere questo autocomplete="new-password" non è completamente supportato da tutti i browser, ma funziona su alcuni

 
  • ...

Per il tipo di testo usa autocomplete="off" o autocomplete="false"

  

Per il tipo di password usa autocomplete="new-password"