Sostituisci la compilazione del modulo del browser e l'evidenziazione dell'input con HTML / CSS

139

Ho 2 moduli di base: accedi e registrati, entrambi sulla stessa pagina. Ora, non ho problemi con il modulo di accesso che si riempie automaticamente,ma anche il modulo di iscrizione si riempie automaticamente e non mi piace.

Inoltre, gli stili del modulo hanno uno sfondo giallo che non riesco a sovrascrivere e non voglio usare CSS in linea per farlo. Cosa posso fare per impedire che vengano colorati di gialloe (possibilmente) riempimento automatico? Grazie in anticipo!

html  css  input  autofill 
— casraf
fonte
4
Stai davvero ponendo due domande qui: Come disabilitare la compilazione automatica dei moduli? -AND- Come sovrascrivere lo sfondo giallo quando il riempimento automatico del modulo è abilitato? Questo non è stato chiaro fino a quando non ho letto tutti i commenti nelle risposte di seguito. Potresti prendere in considerazione la possibilità di modificare la tua domanda (soprattutto da quando sei arrivato al punto di offrire una taglia).
— benzado,
Hai ragione, modificato. O una versione pigra di esso comunque.
— Casraf
1
Come utente del modulo, odio avere la mia usabilità paralizzata a causa delle tue preferenze visive forzando il completamento automatico e mettendo in evidenza. Consenti all'utente di disattivarlo, non tu. Lascia in pace la mia esperienza di navigazione.
— Byran Zaugg
Questo è il punto, ho disabilitato il completamento automatico solo nel modulo REGISTRAZIONE, che in pratica non dovrebbe avere un completamento automatico regolare, le informazioni di completamento vengono create solo dopo l'iscrizione. Per quanto riguarda il modulo di accesso, voglio mantenere il completamento automatico attivo, ma disabilito solo il colore stupido che mette sui campi di input perché il testo all'interno diventa illeggibile - lo sfondo è giallo e il colore del testo è bianco (lo sfondo originale è grigio scuro) .
— casraf
1
possibile duplicato della compilazione automatica
— zzzzBov

Risposte:

163

per il completamento automatico, puoi usare:

<form autocomplete="off">

per quanto riguarda il problema di colorazione:

dal tuo screenshot vedo che webkit genera il seguente stile:

input:-webkit-autofill {
    background-color: #FAFFBD !important;
}

1) poiché # id-styles è ancora più importante degli stili .class, potrebbe funzionare quanto segue :

#inputId:-webkit-autofill {
    background-color: white !important;
}

2) se non funziona, puoi provare a impostare lo stile tramite javascript a livello di codice 

$("input[type='text']").bind('focus', function() {
   $(this).css('background-color', 'white');
});

3) se non funziona, sei condannato :-) considera questo: questo non nasconderà il colore giallo, ma renderà di nuovo leggibile il testo.

input:-webkit-autofill {
        color: #2a2a2a !important; 
    }

4) una soluzione css / javascript:

css:

input:focus {
    background-position: 0 0;
}

e il seguente javascript deve essere eseguito al caricamento:

function loadPage()
{
    if (document.login)//if the form login exists, focus:
    {
        document.login.name.focus();//the username input
        document.login.pass.focus();//the password input
        document.login.login.focus();//the login button (submitbutton)
    }
}

per esempio:

<body onload="loadPage();">

in bocca al lupo :-)

5) Se nessuna delle operazioni sopra descritte prova a rimuovere gli elementi di input, clonandoli, quindi riposizionando gli elementi clonati sulla pagina (funziona su Safari 6.0.3):

<script>
function loadPage(){

    var e = document.getElementById('id_email');
    var ep = e.parentNode;
    ep.removeChild(e);
    var e2 = e.cloneNode();
    ep.appendChild(e2);

    var p = document.getElementById('id_password');
    var pp = p.parentNode;
    pp.removeChild(p);
    var p2 = p.cloneNode();
    pp.appendChild(p2);
}

document.body.onload = loadPage;
</script>

6) Da qui :

if (navigator.userAgent.toLowerCase().indexOf("chrome") >= 0) {
    $(window).load(function(){
        $('input:-webkit-autofill').each(function(){
            var text = $(this).val();
            var name = $(this).attr('name');
            $(this).after(this.outerHTML).remove();
            $('input[name=' + name + ']').val(text);
        });
    });
}
— Phil Rykoff
fonte
(1) non funziona. Proverò (2) quando torno a casa; speriamo che JS possa scavalcare questo; grazie :)
— casraf
1
(4) rimuove definitivamente il giallo: il bordo del fuoco.
— Ruruskyi,
Se l'ultimo bit non funziona per te e sai come funziona javascript (ho capito bene l'ID, ecc.) Potresti avere il problema che ho avuto, sto usando jquery mobile per alcuni motivi e questo inizia dopo e sostituisce gli input sembra. Quindi quello che ho fatto è impostare un intervallo che lo cloni ogni 50 ms (ha funzionato dopo 400ms usando setTimeout ma non voglio rischiare connessioni lente). E dopo un secondo l'intervallo viene rimosso:code
— Mathijs Segers
var keepTheInputCloned = setInterval(function(){ var e = document.getElementById('id_email'); var ep = e.parentNode; ep.removeChild(e); var e2 = e.cloneNode(); ep.appendChild(e2); var p = document.getElementById('id_password'); var pp = p.parentNode; pp.removeChild(p); var p2 = p.cloneNode(); pp.appendChild(p2); },50); setTimeout(function(){clearInterval(keepTheInputCloned)},1000);
— Mathijs Segers,
Sto riscontrando un problema simile con Safari su Mavericks. Ma quando utilizzo il metodo 5, lo eseguono per un secondo (o tre secondi quando imposto il timeout su 3000) e quindi il browser vince e ho il completamento automatico attivato. Nel mio caso di utilizzo, sto chiedendo all'utente il loro nome utente / password per un altro sito in modo da poter estrarre informazioni dall'altro sito, quindi sicuramente non voglio che compili automaticamente il nome utente e la password che usano per il mio sito. Qualche idea su questo (oltre al destino dell'originale n. 3)?
— Jack RG,
218

Ingannalo con un'ombra "forte" all'interno:

input:-webkit-autofill {
    -webkit-box-shadow:0 0 0 50px white inset; /* Change the color to your own background color */
    -webkit-text-fill-color: #333;
}

input:-webkit-autofill:focus {
    -webkit-box-shadow: 0 0 0 50px white inset;/*your box-shadow*/
    -webkit-text-fill-color: #333;
}
— Tamás Pap
fonte
10
Questo è davvero intelligente. :)
— Jordan Grey,
3
+1000 (se potessi) Sì, non riesco a immaginare nessun altro modo per farlo. Questo è davvero invadente del webkit ...
— o_O
1
fantastica questa dovrebbe essere la risposta numero uno, semplice ed efficace
— Pixelomo,
3
È fantastico in quanto funziona ed è davvero creativo. Ma mi ricorda vecchi hack di IE6 e simili. Un po 'schifoso di google per darci un parametro: -webkit-autofill e non permettere ai designer di ignorare il valore predefinito, giusto?
— squarecandy
1
Fornire una scelta di colore che non può essere personalizzata non aiuta l'usabilità, né l'accessibilità. Queste preoccupazioni sono ancora interamente nelle mani dello sviluppatore, ad eccezione di questo hack frustrante in Chrome. Nessuno può criticare l'intenzione degli sviluppatori Chrome, solo i risultati.
— Lunster,
25

Aggiungi questa regola CSS e il colore di sfondo giallo scompare. :)

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 1000px white inset;
}
— MCBL
fonte
1
Questo ha funzionato per me - grazie! (anche se avevo bisogno di cambiare il bianco con il colore che volevo davvero)
— jennEDVT
2
Chiaramente la migliore risposta.
— Brandon Harris,
16 
<form autocomplete="off">

Praticamente tutti i browser moderni lo rispetteranno.

— Jason Kester
fonte
7
Fantastico, ma risolve solo il problema meno importante; come posso mantenere il completamento automatico ma perdere lo stile ( prntscr.com/4hkh ) che il webkit gli infila nella gola? o: grazie comunque
— casraf il
1
In realtà, dovrebbe fare entrambe le cose. La casella diventa gialla solo per farti sapere che chrome / safari / ff lo ha compilato automaticamente con la tua password. Se gli dici di non riempire, non avrà la possibilità di colorarlo.
— Jason Kester,
11
sì, ma guarda quello che ho detto: "come posso mantenere l'auto completa ma perdere gli
— spinotti del webkit di
L'unico problema autocompleteè che non è valido in HTML prima della versione 5.
— Paul D. Waite
15

Dopo 2 ore di ricerche sembra che Google Chrome abbia ancora la precedenza sul colore giallo, ma ho trovato la soluzione. Funzionerà anche per hover, focus ecc. Tutto quello che devi fare è aggiungere !importantad esso.

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px white inset !important;
}

questo rimuoverà completamente il colore giallo dai campi di input

— don
fonte
Funziona per me senza 1000px, solo 0 ovunque, -webkit-box-shadow: 0 0 0 0 inserto bianco! Importante;
— Luis Lopez,
3

Puoi anche modificare l'attributo name degli elementi del modulo in modo che venga generato in modo che il browser non ne tenga traccia. TUTTAVIA firefox 2.x + e google chrome non sembrano avere molti problemi se l'URL della richiesta è identico. Prova sostanzialmente ad aggiungere un parametro di richiesta salt e un nome campo salt per il modulo di iscrizione.

Tuttavia, penso che autocomplete = "off" sia ancora la soluzione migliore :)

— Dmitriy Likhten
fonte
3

È possibile disabilitare il completamento automatico a partire da HTML5 (tramite autocomplete="off"), ma NON È possibile ignorare l'evidenziazione del browser. Potresti provare a fare confusione ::selectionnei CSS (la maggior parte dei browser richiede un prefisso del fornitore per funzionare), ma probabilmente non ti aiuterà neanche.

A meno che il fornitore del browser non abbia implementato in modo specifico un modo specifico del fornitore per sovrascriverlo, non puoi fare nulla su tali stili che sono già destinati a sovrascrivere il foglio di stile del sito per l'utente. Di solito vengono applicati dopo l'applicazione dei fogli di stile e ignorano anche le ! importantsostituzioni.

— Alan Plum
fonte
3

A volte il completamento automatico nel browser si completa automaticamente quando hai solo il codice <form>nell'elemento.

Ho provato a inserirlo anche <input>nell'elemento e ha funzionato meglio.

<form autocomplete="off">  AND  <input autocomplete="off">

Il supporto per questo attributo è tuttavia in via di cessazione, si prega di leggere https://bugzilla.mozilla.org/show_bug.cgi?id=956906#c1

https://bugzilla.mozilla.org/show_bug.cgi?id=956906

Un'altra soluzione che ho scoperto è quella di eliminare i segnaposto all'interno dei campi di input che suggeriscono che si tratti di un campo di posta elettronica, nome utente o telefono (ad es. "La tua email", "Email", ecc. ")

inserisci qui la descrizione dell'immagine

Questo fa sì che i browser non sappiano che tipo di campo sia, quindi non provano a completarlo automaticamente.

— andstud.io
fonte
Quello che mi piace di questo è che la maggior parte delle persone non apprezzerebbe il fatto che l'intero modulo non venga compilato in una pagina ricaricata (ad es. Una lunga area di testo), ma consente allo sviluppatore di impedire che alcuni elementi vengano compilati (ad es. Numero di carta bancaria). Purtroppo, il supporto per questo attributo sta cessando
— Luke Madhanga,
1

Se è nel campo di input, stai tentando di "non-giallo" ...

  1. Imposta un colore di sfondo con css ... diciamo #ccc (grigio chiaro).
  2. Aggiungi valore = "sometext", che riempie temporaneamente il campo con "sometext"
  3. (facoltativo) Aggiungi un po 'di javascript per rendere chiaro il "sometext" quando vai a inserire il testo reale.

Quindi, potrebbe apparire così:

<input id="login" style="background-color: #ccc;" value="username"
    onblur="if(this.value=='') this.value='username';" 
    onfocus="if(this.value=='username') this.value='';" />
— cavallo bianco
fonte
1

Questo risolve il problema su Safari e Chrome

if(navigator.userAgent.toLowerCase().indexOf("chrome") >= 0 || navigator.userAgent.toLowerCase().indexOf("safari") >= 0){
window.setInterval(function(){
    $('input:-webkit-autofill').each(function(){
        var clone = $(this).clone(true, true);
        $(this).after(clone).remove();
    });
}, 20);
}
— Arjan
fonte
1
Credo che lo farà, ma non sarebbe un po 'difficile farlo 50 volte al secondo? So che funzionerà e non sarà troppo lento. Ma sembra un po 'troppo.
— Mathijs Segers,
0

Lo screenshot a cui hai collegato dice che WebKit sta usando il selettore input:-webkit-autofillper quegli elementi. Hai provato a metterlo nel tuo CSS?

input:-webkit-autofill {
    background-color: white !important;
}

Se ciò non funziona, probabilmente nulla funzionerà. Questi campi sono evidenziati per avvisare l'utente che sono stati compilati automaticamente con informazioni private (come l'indirizzo di casa dell'utente) e si potrebbe sostenere che consentire la nasconditura di una pagina comporta un rischio per la sicurezza.

— benzado
fonte
0

L' formelemento ha un autocompleteattributo su cui puoi impostare off. A partire dal CSS la !importantdirettiva dopo una proprietà impedisce che venga annullata:

background-color: white !important;

Solo IE6 non lo capisce.

Se ti ho frainteso, c'è anche la outlineproprietà che potresti trovare utile.

— zneak
fonte
2
Chrome sembra ignorare l'importante! Quando
— riempie
@Torandi Potrebbe essere a causa dei fogli di stile dell'agente utente. Le impostazioni dei fogli di stile user-agent dovrebbero essere applicate per ultime, a meno che non abbia la !importantdirettiva, nel qual caso ha la precedenza su tutto il resto. Dovresti dare un'occhiata al tuo foglio di stile dell'agente utente (anche se non so dove trovarlo).
— zneak,
0

Ho visto la funzione di completamento automatico della barra degli strumenti di Google disabilitata con javascript. Potrebbe funzionare con alcuni altri strumenti di compilazione automatica; Non so se aiuterà con i browser integrati nel completamento automatico.

<script type="text/javascript"><!--
  if(window.attachEvent)
    window.attachEvent("onload",setListeners);

  function setListeners(){
    inputList = document.getElementsByTagName("INPUT");
    for(i=0;i<inputList.length;i++){
      inputList[i].attachEvent("onpropertychange",restoreStyles);
      inputList[i].style.backgroundColor = "";
    }
    selectList = document.getElementsByTagName("SELECT");
    for(i=0;i<selectList.length;i++){
      selectList[i].attachEvent("onpropertychange",restoreStyles);
      selectList[i].style.backgroundColor = "";
    }
  }

  function restoreStyles(){
    if(event.srcElement.style.backgroundColor != "")
      event.srcElement.style.backgroundColor = "";
  }//-->
</script>
— Adamo
fonte
0

Dopo aver provato molte cose, ho trovato soluzioni funzionanti che hanno rovinato i campi compilati automaticamente e li hanno sostituiti con duplicati. Per non perdere gli eventi collegati, mi è venuta in mente un'altra soluzione (un po 'lunga).

Ad ogni evento "input" associa rapidamente gli eventi "change" a tutti gli input coinvolti. Verifica se sono stati compilati automaticamente. Se sì, invia un nuovo evento di testo che indurrà il browser a pensare che il valore sia stato modificato dall'utente, permettendo così di rimuovere lo sfondo giallo.

var initialFocusedElement = null
  , $inputs = $('input[type="text"]');

var removeAutofillStyle = function() {
  if($(this).is(':-webkit-autofill')) {
    var val = this.value;

    // Remove change event, we won't need it until next "input" event.
    $(this).off('change');

    // Dispatch a text event on the input field to trick the browser
    this.focus();
    event = document.createEvent('TextEvent');
    event.initTextEvent('textInput', true, true, window, '*');
    this.dispatchEvent(event);

    // Now the value has an asterisk appended, so restore it to the original
    this.value = val;

    // Always turn focus back to the element that received 
    // input that caused autofill
    initialFocusedElement.focus();
  }
};

var onChange = function() {
  // Testing if element has been autofilled doesn't 
  // work directly on change event.
  var self = this;
  setTimeout(function() {
    removeAutofillStyle.call(self);
  }, 1);
};

$inputs.on('input', function() {
  if(this === document.activeElement) {
    initialFocusedElement = this;

    // Autofilling will cause "change" event to be 
    // fired, so look for it
    $inputs.on('change', onChange);
  }
});
— Ernests Karlsons
fonte
0

Semplice soluzione javascript per tutti i browser:

setTimeout(function() {
    $(".parent input").each(function(){
        parent = $(this).parents(".parent");
        $(this).clone().appendTo(parent);   
        $(this).attr("id","").attr("name","").hide();
    }); 
}, 300 );

Clona l'input, ripristina l'attributo e nascondi l'input originale. Il timeout è necessario per iPad

— Acaro
fonte
0

Poiché il browser cerca i campi del tipo di password, un'altra soluzione consiste nell'includere un campo nascosto all'inizio del modulo:

<!-- unused field to stop browsers from overriding form style -->
<input type='password' style = 'display:none' />
— Kt Mack
fonte
0

Ho letto così tanti thread e provato così tanti pezzi di codice. Dopo aver raccolto tutta quella roba, l'unico modo in cui ho trovato di svuotare in modo pulito i campi di login e password e ripristinare il loro sfondo su bianco era il seguente:

$(window).load(function() {
    setTimeout(function() {
        $('input:-webkit-autofill')
            .val('')
            .css('-webkit-box-shadow', '0 0 0px 1000px white inset')
            .attr('readonly', true)
            .removeAttr('readonly')
        ;
    }, 50);
});

Sentiti libero di commentare, sono aperto a tutti i miglioramenti se ne trovi alcuni.

— TwystO
fonte
0

Il completamento automatico disattivato non è supportato dai browser moderni. Il modo più semplice per risolvere il completamento automatico che ho trovato era una piccola traccia con HTML e JS. La prima cosa da fare è cambiare il tipo di input in HTML da "password" a "testo".

<input class="input input-xxl input-watery" type="text" name="password"/>

Il completamento automatico inizia dopo il caricamento della finestra. Va bene. Ma quando il tipo di campo non è "password", il browser non sapeva quali campi deve essere completato. Quindi, non ci sarà il completamento automatico nei campi del modulo.

Successivamente, associa l'evento focusin al campo password, ad es. in Backbone:

'focusin input[name=password]': 'onInputPasswordFocusIn',

In onInputPasswordFocusIn, basta cambiare il tipo di campo in password, con un semplice controllo:

if (e.currentTarget.value === '') {
    $(e.currentTarget).attr('type', 'password');
}

Questo è tutto!

UPD: questa cosa non funziona con JavaSciprt disabilitato

UPD nel 2018. Anche trovato qualche trucco divertente. Impostare l'attributo di sola lettura sul campo di input e rimuoverlo dall'evento focus. In primo luogo impedire al browser di compilare automaticamente i campi, in secondo luogo consentirà di inserire dati.

— volodymyr3131
fonte
Anche il completamento automatico fa parte dello standard, sebbene l'utilizzo e l'implementazione possano variare. Inoltre, la modifica dei tipi di input in IE non riesce in modo spettacolare, motivo per cui jQuery lo blocca, ma in genere non è una buona idea se si prevede di supportare IE developer.mozilla.org/en-US/docs/Web/Security/…
— casraf
@casraf Siamo spiacenti, fa parte di Standart, ma non funziona in tutti i browser moderni come deve, quindi non farà ciò per cui è stato inventato. In EDGE funziona bene, le versioni precedenti non possono dire nulla (
— volodymyr3131,
È vero, non è implementato ovunque. Il problema persiste - a seconda di quanto tempo desideri supportare IE - prima della v 11, non credo che tu possa cambiare il tipo di input. Se non sei preoccupato per le vecchie versioni, allora potresti anche usare autocomplete=off, poiché funziona in FF, Chrome per un po 'e IE a partire dalla versione precedente o giù di
— lì
Ho provato a usare il completamento automatico = off, sia per gli input che per i moduli, e Chrome riempie ancora i dati dei moduli di iscrizione e di accesso (. Questo è solo una sorta di strana magia, perché in base ai commenti, in alcuni casi funziona, e in alcuni no =)
— volodymyr3131
So che questi standard non vengono seguiti in modo coerente. È un peccato, rende le nostre vite più difficili :(
— casraf
0

Ho dovuto anche cambiare il colore del testo in qualcosa di più scuro (vedi Colori del tema scuro StackOverflow).

Così è finito con un ibrido di @ Tamás Pap, la soluzione @MCBL e @ don:

input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0px 1000px #2d2d2d inset !important;
    -webkit-text-stroke-color: #e7e8eb !important;
    -webkit-text-fill-color: #e7e8eb !important;
}
— Andrei
fonte
-3

Perché non metterlo semplicemente nel tuo css:

input --webkit-autocomplete {
  color: inherit;
  background: inherit;
  border: inherit;
}

Questo dovrebbe occuparsi del tuo problema. Anche se solleva un problema di usabilità perché ora l'utente non può vedere che il modulo è stato compilato automaticamente nel modo in cui è abituato.

[modifica] Dopo aver pubblicato questo, ho visto che era già stata data una risposta simile e che hai commentato che non funzionava. Non capisco perché perché ha funzionato quando l'ho provato.

— Kris
fonte
non funziona in Chrome e Safari. lo stile è input:-webkit-autofille input --webkit-autocompletesemplicemente non esiste
— ruruskyi
@EliseuMonar: Sono abbastanza sicuro di non mentire, ma non ricordo i dettagli di come o dove l'ho provato. Il codice stesso è stato probabilmente digitato dalla memoria, non copiato / incollato, quindi il completamento automatico rispetto al riempimento automatico? Non so.
— Kris,
-3

Il vero problema qui è che Webkit (Safari, Chrome, ...) ha un bug. Quando c'è più di un [modulo] nella pagina, ognuno con un [input type = "text" name = "foo" ...] (cioè con lo stesso valore per l'attributo 'name'), quindi quando l'utente ritorna alla pagina il riempimento automatico verrà eseguito nel campo di input del PRIMO [modulo] sulla pagina, non nel [modulo] che è stato inviato. La seconda volta, il NEXT [modulo] verrà compilato automaticamente e così via. Solo [modulo] con un campo di testo di input con lo stesso nome sarà interessato.

Questo dovrebbe essere segnalato agli sviluppatori Webkit.

Opera compila automaticamente il [modulo] giusto.

Firefox e IE non si riempiono automaticamente.

Quindi, ripeto: questo è un bug in Webkit.

— Per Lindberg
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.