I have browsed through many Stack Overflow threads and no solution is working for me. I want to completely disable Auto-fill/Autocomplete by browser on the website.
Chrome is ignoring everything I have tried on my password field.
Common things tried:
autocomplete="off/false/disabled"
autofill="off/false/disabled"
autocomplete="new-password" shows suggest strong password option
To prevent autofill on a password field, add a hidden input field just before the password in your code, call it USERNAME and set its value to a random string, the longer the better so that when the browser saves the password, it pairs with your random and likely never used again username so it will be saved bhut never auto filled in future. If you also need a username field for your form, call it something else and use my random ID trick below on it and place the code before the hidden username field on your form.
As for auto fill on other form fields, here’s a solution guaranteed to work reliably every time.
As most of you are aware, all the previous attempts like autofill=off etc are being ignored by Chrome autofill. There is no longer any reliable one-line solution to Googles irritating feature, but I have found a work around that as far as I can see, can’t be bypassed by Chrome even in the future as it involves changing the form element IDs on every page load and obscuring the field names the user is shown.
There are 3 steps to my system – note you will need to use a few lines of java script, but this can be put between script tags and run after page loads, eg. $(document).ready(function(){ document.getElementById('cust_phone').id = myrandomstring;});
Add invisible characters between the letters in key form field names that are shown to the user, eg. Instead of using “Phone” in the div beside the input field for customers phone number, change the word by breaking the text up by inserting invisible characters every few letters, eg. P& zwnj;ho& zwnj;ne (without the spaces, those are included so this example doesn’t disappear on this page!). This will be invisible to the user but will hide the trigger word Phone from the autofill function.
After your html form loads, change the ID of all your input fields to a random string (different for each field of course) and store those random IDs in variables. For example,, if the original ID on your phone number field was “cust_phone”, on page load, add document.getElementById(“cust_phone”).id = myrandomstring; then use that random string when getting the value from that field later eg. $(‘input[id=’ + myrandomstring + ‘]’).val();
Finally, remove ALL comments in your code near the form fields that use words like phone number including tool tips.
Do this and Chrome will see every form load as a different new form and wont be able to match what was entered in the previous form load as the field IDs will change every time. It also wont be able to determine what sort of data goes to each field until form is submitted and then it doesn’t matter because those IDs will be different next time it loads, in effect, a virgin form every time its used.
You can use autocomplete="cc-csc" - this apparently tells Chrome it's a credit card CSC/CVV field and it's not allowed to auto-complete that.
