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...

You are trying to use HTML and JS to manipulate how Chrome works? Are you going to implement separate solutions for IE/Edge/Safari/Opera as well to override their auto-fill functionality too? — zerohero, May 05 '16 at 09:50
I dont have to... Firefox and IE dont have problems with autocomplete='off' — Talin Paul, May 05 '16 at 09:55

lamp76 · Answer 1 · 2016-05-05T11:19:13.003

1

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. (i.e. bootstrap).

edited May 05 '16 at 11:19

answered May 05 '16 at 09:45

lamp76

304
1
10

The HTML here is bieng generated via XSLT Templates. Anything I change there will be reflected in the whole application. I want to avoid that as much as possible. Making a field readonly from XSLT will cause trouble... – Talin Paul May 05 '16 at 09:53
I have added the CSS rule... We dont use bootstrap, lucky for me I guess. – Talin Paul May 05 '16 at 09:59
Ok but you can specify a css selector very specific for you input field. – lamp76 May 05 '16 at 10:11

score 0 · Answer 2 · answered May 05 '16 at 10:00

I think you don't provide type for textbox like type="textbox" in your code

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

Javascript works only with alert() and Debug mode

2 Answers2