2015-04-28 12 views
9

Sto usando Google Maps Javascript v3 per l'installazione di completamento automatico in un campo di input HTML in questo modo:Chrome Riempimento automatico copre completamento automatico per Google Maps v3 API

http://imgur.com/Rm6X2FI.png - (w/out riempimento automatico)

Il problema che ho' m avendo è che Riempimento automatico di Chrome copre la Mappe Completamento automatico in questo modo:

http://imgur.com/7a2QM7L.png - (w/riempimento automatico)

ho trovato una soluzione on-line un paio di mesi fa (ref: Disabling Chrome Autofill), ma sembra che questa soluzione non ha più alcun effetto.

<input type="text" name="address" id="address_fake" autocomplete="off" style="display:none"> 
<input type="text" name="address" id="address" autocomplete="off" placeholder="Address" /> 

C'è un modo posso smettere di riempimento automatico di Chrome da mostrare in cima alla lista di Google Maps completamento automatico?

Grazie!

MODIFICA: Stop Google chrome auto fill the input non fornisce una soluzione al mio problema corrente. Il problema è relativo al menu a discesa Compilazione automatica di Chrome nel campo di input, non al campo di inserimento che viene automaticamente riempito con un valore di riempimento automatico.

+0

Ho provato 'value =" "', ma non ha alcun effetto in questa situazione. –

+0

Ho parlato di 'input: -webkit-autofill {display: none; } ', ma nessun sigaro. –

+0

Anche questo non ha alcun effetto. –

risposta

14

Questo mi stava facendo impazzire. Hanno lo stesso problema. Utilizziamo gli script per visualizzare i valori dei campi per consentire a un utente di scegliere e NON VOGLIONO che l'auto-qualsiasi del browser sia in grado di rovinarlo. Chrome sembra essere il bugger (ultima versione 42.0.2311.135 m), Firefox (FF) con cui possiamo lavorare.

Quindi, abbiamo a che fare con il browser autocomplete E Chrome autofill pure. Se aggiungo: < form autocomplete = "off" > nella parte superiore, si interrompe il completamento automatico in FF e Chrome ma non AUTOFILL in Chrome. Cambiare 'off' in 'false' non fa nulla per nessuno dei due browser. Risolto il problema FF ma non Chrome in quanto mostra la brutta casella AUTOFILL sul contenuto.

Se si aggiunge autocomplete = "off" per ciascuna dei campi individualmente poi di nuovo, lavora in FF, ma per i campi di input che hanno questo attributo di completamento automatico in Chrome è spento ma il riempimento automatico alza ancora la sua brutta testa.

Ora, la cosa strana è che se si modifica il valore nel campo di input individuale da "off" a "false", allora sembra scuotere Chrome e per il campo si ha questo set di autocomplete = "false" quindi visualizzi SOLO i valori di completamento automatico (se prima è stato inserito qualcosa nel campo) e tutti gli altri campi di input non mostrano nulla! Puoi anche impostare questo valore su no o su xx o qualsiasi altra cosa e sembra che Chrome Barfs sul valore non valido per il completamento automatico e il modulo reagisca in modo strano. Se hai 5 campi e lo imposti per il terzo campo, i campi 1,2, 4 e 5 sono vuoti ma il campo 3 mostra il completamento automatico.

questo è un esempio per di copiare e pasticciare con (si tenta di passare l'attributo autocomplete a diversi campi e vedere come reagisce):

<!DOCTYPE html> 
<html> 

<head> 
    <title>Signup</title> 
</head> 

<body> 
    <form autocomplete="off" method="post"> 
    First name: 
    <input name="Firstname" type="text"> 
    <br />Last name: 
    <input name="Lastname" type="text" style="width: 124px"> 
    <br />Address: 
    <input autocomplete="false" name="Address" type="text" style="width: 383px"> 
    <br />Phone number: 
    <input name="Phone" type="text"> 
    <br />E-mail: 
    <input name="Email" type="text" style="width: 151px"> 
    <br /> 
    <input type="submit"> 
    </form> 
</body> 

</html> 

La mia soluzione per spegnere sia completamento automatico e riempimento automatico di Chrome (dovresti essere in grado di mettere il campo di input nascosto in alto o in basso sotto il submit).Aggiungi questo < input autocomplete = "false" name = "hidden" type = "text" style = "display: none;" > al codice:

<!DOCTYPE html> 
<html> 

<head> 
    <title>Signup</title> 
</head> 

<body> 
    <form autocomplete="off" method="post"> 
    <input autocomplete="false" name="hidden" type="text" style="display:none;"> 
    <br />First name: 
    <input name="Firstname" type="text"> 
    <br />Last name: 
    <input name="Lastname" type="text" style="width: 124px"> 
    <br />Address: 
    <input name="Address" type="text" style="width: 383px"> 
    <br />Phone number: 
    <input name="Phone" type="text"> 
    <br />E-mail: 
    <input name="Email" type="text" style="width: 151px"> 
    <br /> 
    <input type="submit"> 
    </form> 
</body> 

</html> 

Linea di fondo: Chrome non aderire alla autocomplete = off, ma la compilazione automatica di Chrome è il problema. Spero che questo ti aiuti.

+1

Sei un maestro. Avendo 'autocomplete =" off "' sul form e 'autocomplete =" false "' sull'ingresso nascosto ha funzionato come un incantesimo per me. Grazie –

+1

Grazie Questo mi ha infastidito per un po 'e funziona perfettamente – Marc

+1

No, non funziona, non appena hai un'etichetta vicino al campo di input che dice qualcosa come "Indirizzo" mostrerà quello stupido elenco a discesa. – Overbryd

-2

prova ad aggiungere questo al vostro file CSS:

.pac-container{ 
    display:none!important; 
} 
1

Nessuna delle risposte di cui sopra ha funzionato per me (Chrome 64.0.3282.186, finestre x64).

TL; DR: Il codice di Google Maps sta cambiando l'attributo autocomplete-off, quindi, anche se lo si imposta a new-password, ci si può comunque riempimento automatico. L'hack che sto usando è quello di ascoltare le mutazioni su quell'attributo e quindi ignorarlo. Nota: cambiare semplicemente l'attributo dopo aver chiamato su Google Maps non funziona.

Configurare un MutationObserver prima di inizializzare il completamento automatico di Google Maps che interrompe immediatamente l'ascolto delle mutazioni e quindi imposta l'attributo su new-password.

var autocompleteInput = document.getElementById("id-of-element"); 

    var observerHack = new MutationObserver(function() { 
     observerHack.disconnect(); 
     $("#id-of-element").attr("autocomplete", "new-password"); 
    }); 

    observerHack.observe(autocompleteInput, { 
     attributes: true, 
     attributeFilter: ['autocomplete'] 
    }); 
Problemi correlati