Google Chrome Version 76.0.3809.100 (Official Build) (64-bit) Autocomplete Behaviour

Question

I want to disable google chrome's persistent autocomplete in all browser for user experience (my Chrome version is 76). I have tried many solution including :

1). The answers from Chrome ignores autocomplete="off"

2). All the answers from autocomplete ='off' is not working when the input type is password and make the input field above it to enable autocomplete

which include

1). Autocomplete="off", autocomplete="somerandomstring"

2). create another fake input above it with hidden style

3). wrap it with invisible div

It seems that the answers from both links are the solution for the outdated version of google chrome almost likely older than 76 chrome version.

<input name="number" type="text" class="form-control search" placeholder="No. Invoice" >
//this input is getting filled with persistent google chrome autocomplete

Expected Output : not filled with autocomplete

Actual Output : filled

Thank you in advance!

Answer 1

Based on Jaromanda X's comment its version issue

Solution : Update Chrome version build

Answer 2

I just came across this same issue and none of the original answers seem to work.

As i use the placeholder text, I came up with a solution of adding the placeholder text as the value if the value is blank, as well as changing the color and then use the onfocus event to remove the value if it's equal to the placeholder and remove the color.

Here is an example:

<input type="text" class="form-control" id="search" placeholder="Search Users" value='Search Users' style="color: #6c757d;" onfocus="if (this.value == this.placeholder) {this.value=''; this.style.color=null;}">

The things that you would still have to look out for:

• You need to add this to each input.
• You need to check input isn't equal to placeholder on validation.

There is one other solution that i found worked:

Add a value to empty input and then remove it using a timeout, this should happen after the autocomplete has run.

html:

<input type="text" class="form-control NoAutoComplete" id="search" placeholder="Search Users" value='Search Users'>

CSS:

.NoAutoComplete {
  color: #6c757d;
}

JS:

setTimeout(function () {
    $(".NoAutoComplete").val("");
    $(".NoAutoComplete").removeClass( "NoAutoComplete" );
}, 1000);

i haven't done to much looking in to this, but you should be able to add a class to all inputs that need not have a value and then delete all values and class at the same time.