rilevare quando il riempimento automatico è stato riempito

Question

Dopo una lunga lotta, ho finalmente trovato l'unico modo per cancellare il riempimento automatico styling in tutti i browser:

$('input').each(function() { 
    var $this = $(this); 

    $this.after($this.clone()).remove(); 
}); 

Il problema è, non può essere eseguito in load, perché il riempimento automatico dei campi avviene dopo il fatto. In questo momento sto in esecuzione su un timeout di 100 millisecondi dopo load:

// Kill autofill styles 
$(window).on({ 
    load: function() { 
     setTimeout(function() { 
      $('.text').each(function() { 
       var $this = $(this); 

       $this.after($this.clone()).remove(); 
      }); 
     }, 100); 
    } 
}); 

e che sembra sicura su anche il più lento dei sistemi, ma non è molto elegante. C'è qualche tipo di evento affidabile o controllo che posso fare per vedere se la compilazione automatica è completa?

MODIFICA: si tratta del riempimento automatico.

autofill http://dl.dropbox.com/u/2463964/autofill.png

Answer 1

C'è un bug aperto su a http://code.google.com/p/chromium/issues/detail?id=46543#c22 relative a questo, sembra che potrebbe (dovrebbe) alla fine sarà possibile scrivere poco più lo stile di default con un selettore !important, che sarebbe la soluzione più elegante. Il codice sarebbe qualcosa di simile:

input { 
    background-color: #FFF !important; 
} 

Per ora però il bug è ancora aperta e sembra che la soluzione hacker è l'unica soluzione per Chrome, ma a) la soluzione per Chrome non ha bisogno setTimeout e B) Sembra che Firefox potrebbe essere rispetto al flag !important o una sorta di selettore CSS con priorità elevata come descritto in Override browser form-filling and input highlighting with HTML/CSS. questo aiuta?

Answer 2

Se si utilizza Chrome o Safari, è possibile utilizzare il selettore input:-webkit-autofill CSS per ottenere i campi autofilled.

codice di rilevamento

Esempio:

setInterval(function() { 
    var autofilled = document.querySelectorAll('input:-webkit-autofill'); 
    // do something with the elements... 
}, 500); 

Answer 3

propongo si evitando il riempimento automatico al primo posto, invece di cercare di ingannare il browser

<form autocomplete="off"> 

Maggiori informazioni: http://www.whatwg.org/specs/web-forms/current-work/#the-autocomplete

Se si vuole mantenere il comportamento di riempimento automatico ma il cambiamento lo stile, forse si può fare qualcosa di simile (jQuery):

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

Answer 4

$(window).load(function() 
{ 
    if ($('input:-webkit-autofill')) 
    { 
     $('input:-webkit-autofill').each(function() 
     { 
      $(this).replaceWith($(this).clone(true,true)); 
     }); 
     // RE-INITIALIZE VARIABLES HERE IF YOU SET JQUERY OBJECT'S TO VAR FOR FASTER PROCESSING 
    } 
}); 

Ho notato che la soluzione jQuery che hai pubblicato non copiava eventi collegati. Il metodo che ho pubblicato funziona per jQuery 1.5+ e dovrebbe essere la soluzione preferita in quanto conserva gli eventi collegati per ciascun oggetto. Se si dispone di una soluzione per eseguire il ciclo di tutte le variabili inizializzate e inizializzarle nuovamente, sarà disponibile una soluzione jQuery completa al 100%, altrimenti sarà necessario inizializzare nuovamente le variabili impostate in base alle esigenze.

ad esempio: var foo = $ ('# foo');

quindi dovresti chiamare: foo = $ ('# foo');

perché l'elemento originale è stato rimosso e un clone ora esiste al suo posto.