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


        

Answer 1

In some cases, the browser will keep suggesting autocompletion values even if the autocomplete attribute is set to off. This unexpected behavior can be quite puzzling for developers. The trick to really forcing the no-autocompletion is to assign a random string to the attribute, for example:

autocomplete="nope"

https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion

Tried in major browsers and it works!

Answer 2

If it is indeed a Firefox bug, you could use an onSubmit event to clear out the hidden fields. In the form code:

<form onSubmit="clearFieldsIfPopulated(this)">
  <input type="hidden" name="field1"> <input type="submit">
</form>

Example Javascript function:

function clearFieldsIfPopulated(form) {
  if (form.field1.value != "") {
    form.field1.value == "";
  }
}

Answer 3

This post suggest to use (other) dummy fields which will be autofilled, you can hide those with css. But this would probably work better with password fields than others.

Answer 4

autocomplete='off' will not prevent whether in input or form put a

<input type='password' style='display: none;' />

before your real password input.

Answer 5

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;
    }
}