0

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!

Sam
  • 499
  • 4
  • 15
  • what about `76.0.3809.132` or the current `77.0.3865.75` - Chrome breaks things regularly, you really need to keep it up to date – Jaromanda X Sep 11 '19 at 05:34
  • hi Jaromanda, I have my google chrome auto updated on my os and the version in this question's title is the latest. – Sam Sep 11 '19 at 06:58
  • @JaromandaX yeah it has been fixed on 77.0.3865.75 version built – Sam Sep 11 '19 at 07:53
  • I see google still haven't figured out updates .... every second major version of Chrome breaks something simple, and breaks it completely!! and `76.0.3809.100` was not even the latest `76.0.3809.x` release, so the chrome auto update is not working well :p – Jaromanda X Sep 11 '19 at 08:59
  • 1
    Possible duplicate of [2019, Chrome 76, approach to autocomplete off](https://stackoverflow.com/questions/57367813/2019-chrome-76-approach-to-autocomplete-off) – gasman Sep 12 '19 at 09:25
  • I'm seeing no change in 77.0.3865.75 from the behaviour described in https://stackoverflow.com/a/57810447/1853523. – gasman Sep 12 '19 at 09:36

1 Answers1

0

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.

krisph
  • 459
  • 8
  • 12
  • i think for second solution it would replace everything if the user typed on the input – Sam Nov 15 '19 at 06:26
  • just updated the answer to make a little more clear. If the value is set, then autocomplete will not fill the value. it can then be removed after autocomplete has run. – krisph Nov 15 '19 at 11:08