Javascript works only with alert() and Debug mode
Question
I am having this issue with Chrome autofill fields where Chrome is ignoring 'autocmplete="false|off|others"'. I also tried the hidden fake fields, this , this and few more. It does not seem to be working.The fields become yellow and contain password, for which I decided to use the following CSS rule:
input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill
{
-webkit-box-shadow: 0 0 0 1000px white inset !important;
}
with 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"));
});
to overwrite the field manually.
Here is the log output from the above script:
Inside JQuery Window.Load...
XXX:1324 Autofill value(Before Alert): null
XXX:1329 Autofill value(After Alert): [object HTMLInputElement]
And when this is running in debug mode:
Inside JQuery Window.Load...
XXX:1324 Autofill value(Before Alert): [object HTMLInputElement]
XXX:1329 Autofill value(After Alert): [object HTMLInputElement]
I tried the following permutations with:
$('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>
This is the field with issue:
<input name="MY_REFNO" id="MY_REFNO" style="WIDTH: 180px" maxlength="16" onkeypress="upperAlphanumberHandler(event)" onblur="upperAlphanumberChecker('MY_REFNO')" value="" autocomplete="off">
What am I doing wrong? How do I fix this...
2 answers
solution1
1 2016-05-05 09:45:36
To avoid Google Chrome from autofill try:
<input type="password" placeholder="Type your password" onfocus="this.removeAttribute('readonly');" readonly />
Chrome doesn't apply autofill if the fill is readonly.
Anyway you can change the autofill color (yellow to white) with the following css for an input field with name attribute with value "pass":
input[name="pass"]:-webkit-autofill {
-webkit-text-fill-color: #838B95 !important;
webkit-box-shadow: 0 0 0px 1000px white inset !important; //background
}
A hint its always a good best practice to use a css selector as much specific you can, to avoid css overloading by other unwanted css rules. (ie bootstrap).
solution2
0 2016-05-05 10:00:47
我认为您没有在代码中为文本框提供类型，例如 type="textbox"
<input name="MY_REFNO" id="MY_REFNO" style="WIDTH: 180px" maxlength="16" onkeypress="upperAlphanumberHandler(event)" onblur="upperAlphanumberChecker('MY_REFNO')" value="" autocomplete="off">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.