4

How To Preventing Browser Text Input Suggestions from browser cookie, autocomplete="off" and others are not work.. Chrome Version : 2021 chrome version 88.0.4324.190

readonly is work for autofill its work proper, but autosuggestion is not.

 <input type="email" class="form-control" id="email" name="email" placeholder="Enter Email" readonly onfocus="this.removeAttribute('readonly');" style="background-color: white;" autocomplete="off">   
<input type="password" class="form-control" id="Password" name="password" minlength="6" placeholder="Enter Password">

enter image description here

definet
  • 43
  • 7

2 Answers2

1

The only thing that still works in Chrome is creating random name not related to the field. Like autocomplete="new-password" to password field name.
Seems to be wrong, but it's a workaround.

So for your field named email, try to put autocomplete="new-email".

Even as stated as working in the SO below, autocomplete="off" still buggy:
Disabling Chrome Autofill

Also note that autocomplete="no" will appear to work but autocomplete="off" will not for historical reasons. autocomplete="no" is you telling the browser that this field should be auto completed as a field called "no". If you generate unique random autocomplete names you disable auto complete.

You need to keep in mind that's a feature from the Password Manager.
This is correctly stated here by Mozilla:
Preventing autofilling with autocomplete="new-password"

And why it's not always possible to prevent:
Browser compatibility

Note: In most modern browsers, setting autocomplete to "off" will not prevent a password manager from asking the user if they would like to save username and password information, or from automatically filling in those values in a site's login form. See the autocomplete attribute and login fields.

Solution #1:

As you can see, the autosuggestion show From this website.
As workaround, you need to change the fieldname from name="email" to something else, like name="user-email". And handle the change inside your server logic.

Again in your server logic, generate a random name every time page is shown, like a UUID autocomplete="c821c4f0-7be8-11eb-9439-0242ac130002"

Solution #2:

Replace the input kind type="email" to type="text".

html:

<input type="text" class="form-control" id="user-email" name="user-email" placeholder="Enter Email" readonly onfocus="this.removeAttribute('readonly');" autocomplete="off" />

javascript:

window.onload = function () {
    init();
}

function init() {
    let x = document.getElementById("user-email");
    if (x) x.setAttribute("type", "email");
}

Solution #3:

Add hidden fields before the real one:
HTML - Disable Password Manager

PS: Don't forget to place autocomplete="off" on the form which field belongs

Luiz Vaz
  • 1,669
  • 1
  • 19
  • 32
  • i want to disable the autosuggestion not to autofill, autofill is alredy done using readonly only property. – definet Mar 03 '21 at 06:08
  • check edited question you didn't understand my question, my issue is not autofill my issue is autosuggestion browser cookie, i want to prevent those via code.. – definet Mar 03 '21 at 06:14
  • i try all things to change the fieldname from name="email" to others like name="new-email" or name="email1" or etc... i apply my all logic but cant fixed this autosuggestion issue its also in firefox browsers. – definet Mar 03 '21 at 06:50
  • Added a last resort – Luiz Vaz Mar 03 '21 at 19:49
  • its work for email for change type..but i want to also turn off autosuggestion for password field and i cant change this type to password to text... anyway thanks for your resort – definet Mar 04 '21 at 06:39
1

what you want is here

change type="password" to type="text" and used in your input -webkit-text-security: disc !important;

<input type="text" class="form-control" id="Password" name="password" minlength="6" placeholder="Enter Password" style="-webkit-text-security: disc !important;">
Mohammad Malek
  • 624
  • 1
  • 7
  • 17