Disable Firefox's Auto-fill

Question

Is it possible to disable Firefox's auto-fill feature without disabling auto-complete?

I know I can do this:

autocomplete="off" 

But I don't want to disable auto-complete, just the auto-fill.

Firefox is populating some of our hidden fields which are meant to be empty

This is mostly a problem when the user refreshes the page. The form fields are re-populated with values from pre-refresh. An example of this being a problem is old-school place-holder. Where we populate the field with a value, and remove it on submit. The value is re-populated on refresh and we don't know if it's the place-holder or use value.

Answer 1

Putting two dummy fields in between the actual username field and the actual password field worked for me, e.g.:

<input name = "Username" type="text" autocomplete="off"> <input name = "DummyUsername" type="text" style="display:none;"> <input name = "DummyPassword" type="password" style="display:none;"> <input name = "Password" type="password" autocomplete="new-password"> 

This prevented the autofill of the username, as well as the autofill of the password.

autocomplete="new-password" is apparently not fully implemented, but can help with some browsers. I doubt that it was helpful with FireFox, but it is there for future versions in case the feature is more widely adopted.

Answer 2

If the problem is that FF is populating the fields when the user refreshes, this is actually a feature of Firefox to try to help the user in the case of accidental refresh so they don't lose whatever they have typed. I don't think you can override this with the HTML. You could use JavaScript to clear/reset all the relevant form values on page load. If a form.reset() on the form doesn't work, you will have to iterate over the form elements and clear them like this:

for (i = 0; i < frm_elements.length; i++) {     field_type = frm_elements[i].type.toLowerCase();     switch (field_type)     {     case "text":     case "password":     case "textarea":     case "hidden":         frm_elements[i].value = "";         break;     case "radio":     case "checkbox":         if (frm_elements[i].checked)         {             frm_elements[i].checked = false;         }         break;     case "select-one":     case "select-multi":         frm_elements[i].selectedIndex = -1;         break;     default:         break;     } }