2016-05-05 12 views
1

Ich habe dieses Problem mit Autofill-Felder in Chrome, wo Chrome "autocomplete =" false | off | others "ignoriert. Ich habe auch die versteckten gefälschten Felder, this, this und einige mehr versucht. Es scheint nicht working.The Felder werden gelb und enthalten Passwort, für die ich beschlossen, verwenden Sie die folgende CSS-Regel zu sein:Javascript funktioniert nur mit alert() und Debug-Modus

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill 
{ 
    -webkit-box-shadow: 0 0 0 1000px white inset !important; 
} 

mit javascript:

$(window).load(function() { 
    console.log('Inside JQuery Window.Load...'); 
    if(document.querySelector("input:-webkit-autofill")!= null) { 
     document.querySelector("input:-webkit-autofill").value = ""; 
    } 
    console.log('Autofill value(Before Alert): ' + document.querySelector("input:-webkit-autofill")); 
    alert('An alert...'); 
    if(document.querySelector("input:-webkit-autofill")!= null) { 
     document.querySelector("input:-webkit-autofill").value = ""; 
    } 
    console.log('Autofill value(After Alert): ' + document.querySelector("input:-webkit-autofill")); 
}); 

zu überschreiben, das Feld manuell.

Hier ist die Log-Ausgabe aus dem obigen Skript:

Inside JQuery Window.Load... 
XXX:1324 Autofill value(Before Alert): null 
XXX:1329 Autofill value(After Alert): [object HTMLInputElement] 

Und wenn dies im Debug-Modus läuft:

Inside JQuery Window.Load... 
XXX:1324 Autofill value(Before Alert): [object HTMLInputElement] 
XXX:1329 Autofill value(After Alert): [object HTMLInputElement] 

ich die folgenden Permutationen mit versucht:

$('input:-webkit-autofill').each(function(){...}); 
window.document.querySelector("input:-webkit-autofill"); 
<body onload="chromeCheckAutofill();" /> 
<script> 
    function checkAutofill() { 
     if(document.querySelector("input:-webkit-autofill")!= null) { 
      document.querySelector("input:-webkit-autofill").value = ""; 
     } 
    } 
</script> 

Dies ist das Feld mit der Ausgabe:

<input name="MY_REFNO" id="MY_REFNO" style="WIDTH: 180px" maxlength="16" onkeypress="upperAlphanumberHandler(event)" onblur="upperAlphanumberChecker('MY_REFNO')" value="" autocomplete="off"> 

Was mache ich falsch? Wie kann ich dieses Problem beheben ...

+0

Können Sie einige HTML-Code-Snippet hinzu? – lamp76

+1

Nicht '

' Arbeit? – Rayon

+0

Sie versuchen, HTML und JS zu verwenden, um zu manipulieren, wie Chrome funktioniert? Werden Sie auch separate Lösungen für IE/Edge/Safari/Opera implementieren, um ihre Auto-Fill-Funktionalität zu überschreiben? – zerohero

Antwort

1

Um Google Chrome aus autofill versuchen zu vermeiden:

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

Chrome autofill gilt nicht, wenn die Füllung nur lesbar ist.

Auf jeden Fall können Sie die Autofill verfärben (gelb bis weiß) mit dem folgende CSS für ein Eingabefeld mit dem Namen Attribute mit dem Wert „pass“:

input[name="pass"]:-webkit-autofill { 
-webkit-text-fill-color: #838B95 !important; 
webkit-box-shadow: 0 0 0px 1000px white inset !important; //background 
} 

Ein Hinweis seine immer eine gute beste Praxis zu nutzen ein CSS-Selektor, der so spezifisch ist, dass Sie vermeiden können, dass CSS durch andere unerwünschte CSS-Regeln überlastet wird. (d. h. Bootstrap).

+0

Das HTML hier ist Bieg generiert über XSLT Templates. Alles, was ich dort ändere, wird sich in der gesamten Bewerbung widerspiegeln. Ich möchte das so weit wie möglich vermeiden. Ein Feld readonly von XSLT zu verursachen verursacht Störung ... –

+0

Ich habe die CSS Regel hinzugefügt ... Wir benutzen nicht Bootstrap, glücklich für mich ich denke. –

+0

Ok, aber Sie können einen CSS-Selektor angeben, der sehr spezifisch für Ihr Eingabefeld ist. – lamp76

0

Ich glaube, Sie bieten keine Art für Textbox wie type = "Textbox" im Code

<input name="MY_REFNO" id="MY_REFNO" style="WIDTH: 180px" maxlength="16" onkeypress="upperAlphanumberHandler(event)" onblur="upperAlphanumberChecker('MY_REFNO')" value="" autocomplete="off"> 
Verwandte Themen