Programmatically Disabling Chrome Auto-Fill

Programmatically disabling Chrome auto-fill

jquery.disable-autofill

Disable Chrome's autofill. Handy for CRUD forms, when you don't want username/password inputs to be autofilled by the browser.

Usage:

<form>
  <input type="input" name="username" autofill="off" autocomplete="off">
  <input type="password" name="password"  autofill="off" autocomplete="off">
</form>

<script src="jquery.disable-autofill.js"></script>
<script>
  $('input[autofill="off"]').disableAutofill();
</script>

https://github.com/biesbjerg/jquery.disable-autofill

The real 2019 solution to disable chrome autofill

I think I have found the answer. I give credit for @Mangesh Ati for this solution. I just wanted to summarise the solution for anyone else interested.

autocomplete=off works to disable google autosuggestions on all @htmlTextBoxFor, besides for the part of model called address, instead use autocomplete=randomn_string

Important:
If you are using a jquery autocomplete on the textboxfor..its important to add the attribute of autocomplete=randomn_string on .focus like below:

 $('#show_address').autocomplete({

            }).focus(function () {
                 $(this).attr('autocomplete', 'some_random_value');

            });

Disable Google Chrome Autocomplete / Autofill / Suggestion

Chrome no longer supports autocomplete="off". Use autocomplete="new-password"instead.

Mozilla link

From the documentation:

For this reason, many modern browsers do not support
autocomplete="off" for login fields:

If a site sets autocomplete="off" for username and password input fields,
then the browser will still offer to remember this login, and if the
user agrees, the browser will autofill those fields the next time the
user visits the page. This is the behavior in Firefox (since version
38), Google Chrome (since 34), and Internet Explorer (since version
11).

If an author would like to prevent the autofilling of password fields
in user management pages where a user can specify a new password for
someone other than themself, autocomplete="new-password" should be
specified, though support for this has not been implemented in all
browsers yet.

Another solution is using autocomplete="false". Here are a few links to other SO questions that may help:

SO - Disabling Chrome Autofill

SO - Chrome Browser Ignoring AutoComplete=Off

SO - Chrome 63+ Autocomplete Bypass

Disable autofill in Chrome 63

Update Apr 2021:

Chrome and Firefox support autocomplete="off"

Safari continues to ignore autocomplete="off" and as far as I know there's no good solution fore Safari except to obfuscate the field name.

Update Feb 2018:

Thanks to @JamesNisbet for pointing this out in the comments.

According to the Chrome team, autocomplete="off" and autocomplete="false" will be ignored moving forward. This is not a temporary regression in Chrome.

Chrome will attempt to autofill any form fields that follow the WHATWG standard on autocomplete. With one exception, they ignore "off" and "false" values.

In summary, to disable autofill, use the autocomplete attribute with a value that is not on the WHATWG list.

Make your case why you think autocomplete="off" should not be ignored by Chrome in this Chromium thread.

---

Looks like a possible regression in Chrome 63. In Chrome's original autofill documentation:

In the past, many developers would add autocomplete="off" to their form fields to prevent the browser from performing any kind of autocomplete functionality. While Chrome will still respect this tag for autocomplete data, it will not respect it for autofill data. So when should you use autocomplete="off"? One example is when you've implemented your own version of autocomplete for search.

https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill

They do make a distinction between autocomplete and autofill, although it's not clear they are different.

Chrome, Safari, and Edge are all attempting to implement autofill but there is no clear standard. They look at the name attribute rather than an explicit, standardized attribute.

For now autocomplete="something-new" is a good workaround, although syntactically it makes no sense. This seems to work because the browser can't understand it.

Is there a way to disable chrome autofill option for angular form fields

The autocomplete="off" is effectively respected by Chrome, but what you're experiencing is the Chrome autofill functionality that takes over, ignoring autocomplete="off": https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill.

In the past, many developers would add autocomplete="off" to their form fields to prevent the browser from performing any kind of autocomplete functionality. While Chrome will still respect this tag for autocomplete data, it will not respect it for autofill data.

One workaround is to put an unknown value in the autocomplete, e.g. <input type="text" name="somethingAutofillDoesntKnow" autocomplete="doNotAutoComplete" />. When testing this it worked for me most of the time, but for some reason didn't work anymore afterwards.

My advise is not to fight against it and use it's potential by properly using the autocomplete attribute as explained here: https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill

Is there a way to disable chrome AUTOFILL and AUTOCOMPLETE for angular form?

I found a solution :

1 - set input type="text" to readonly :

<input type="text" [readonly]="inputText" />

2 - set input type password to type text and change css to looks like a password input :

html :

<input type="text" [readonly]="inputPassword" class="pw-field"/>

css :

.pw-field{
        -webkit-text-security: disc;
 }

3- Add a focusEvent to both inputs:

html:

<input type="text" [readonly]="inputText" (focus)='focusFunction("text")' />

<input type="text" [readonly]="inputPassword" class="pw-field" (focus)='focusFunction("pw")' />

ts:

focusFunction(type){
  if(type == "text"){
        this.inputText = false;
        this.inputPassword = true;
    }else if(type == "pw"){
        this.inputText = false;
        this.inputPassword = true;
    }
}

---

Related Topics