Hide password manager autocomplete in form fields onfocus

Question

I have a saved passwords in a chrome browser via password manager and I have this following input fields

<input type="text" placeholder="" formControlName="username" #log_name autocomplete="off">
<input type="password" placeholder="" formControlName="password" #pass autocomplete="off">

Everytime the page refresh the browser autofills the fields

what I did is a readonly and onfocus in input to disable the autofills

<input type="text" placeholder="" formControlName="username" #log_name autocomplete="off" 
readonly onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly');}>

<input type="password" placeholder="" formControlName="password" #pass autocomplete="off" 
readonly onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly');}>

now the autofills stops every refresh and it's good.

Problem

Is there a way I could hide the password manage autofill on focus of the field ( that black one )?

Answer 1

Try adding autocomplete to the form as shown below

<form name="loginForm" autocomplete="off">
<input type="text" placeholder="" formControlName="username" #log_name autocomplete="off" 
readonly onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly');}>

<input type="password" placeholder="" formControlName="password" #pass autocomplete="off" 
readonly onfocus="if (this.hasAttribute('readonly')) {this.removeAttribute('readonly');}>
</form>