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">

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;">
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 butautocomplete="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.
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"
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");
}
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
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With