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

Question

i want to disable autofill and autocomplete google chrome option i tried variant solution like :

set *autocomplete="off" OR autocomplete="nope"
set input type="search"
an unknown value in the autocomplete like autocomplete="someThingUnknown"

is there any solution ?

Also see [Chrome ignores autocomplete=“off”](https://stackoverflow.com/questions/12374442/chrome-ignores-autocomplete-off) — str, Jul 11 '20 at 17:14
@str i trierd all those solutions and dosn't work for me, and i found a new solution and i want to share it — Saad, Jul 11 '20 at 17:14

Saad · Accepted Answer · 2020-07-11T17:33:33.993

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;
    }
}

I'm hoping this is helpful. I implemented the following CSS. The Chrome Autofill attempts to load the cached values, but disappears on mouse hover. It's not ideal from a UX perspective, but it's the only thing that seems to work effectively. `input:-webkit-autofill { display: none; }` — Scho, Jul 17 '23 at 09:25

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

1 Answers1