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.

Jagatai

Here are other solutions #25019660 – Parabola

And the problem is FF also sets the username, or guesses that the username is the previous field, which often is something else entirely! (I'm on version 56) – Tragic

Answer 1

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

Cubitiere

I think this is a pretty close answer to what I'm after. I wonder if we could also hook this into window.unload. – Jagatai

Answer 2

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.

Anglesite

Confirmed working. Why does it work? BTW I didn't sandwich the dummy fields like you did. Anyways, I prefer this over JS methods which clear the form on page render... that risks a flash of content where the user see's the form is filled for a moment and then gets cleared... some paranoid and/or naive users wouldn't like that. – Farl

To re-cap: this method seems to disable autofill and keeps autocomplete. – Farl

Working, thank you!! Did the same as MarsAndBack: I put the dummy fields first and the real ones afterwards. – Crocus

I know this thread is quite old, but wth, I'll appreciate someone explaining to me why does this work at all? Why is this a Firefox-only thing? – Siu

Answer 3

Firefox only honors autocomplete="off" on the form, not individual elements (unlike IE).

Another option is to change the field names to strange things like name="_u_sern_ame" to confuse any field recognition systems if you want to disable the autofill of someones details.

Margerymarget

Thanks, but Firefox appears to be caching old values, regardless of name. In a web-app this is quite a pain. – Jagatai

I tried changing the field names to complete placebo like "alpha", "beta", "gamma", but it didn't help. Firefox still auto-fills the password. – Evite

Yeah, I think it's working off the input type "password", rather than the name – Tragic

autocomplete="off" isn't what the OP was asking about. He WANTS autocomplete, but wants to disable autofill. Autofill and autocomplete are two different things. – Farl

Answer 4

I've had a similar issue for the password field in a form on the page.

If there is an input tag with type = password in a form tag on the page Firefox is just automatically populating the password:

<form>
    <input type='password' />
</form>

Here's the code I used to fix this specific issue:

$('input[type=password]').val('')

Emeliaemelin

This worked before but Firefox has gotten stupidierer with autofilling things even when autocomplete="off" is present in a form! I recently found I had to enclose this in $(window).load(function(){ $('input[type=password]').val(''); });. $(document).ready() was even too early as the form was filling after a slight delay. – Funnelform

Answer 5

what worked for me is

autocomplete="new-password"

Heliograph

Answer 6

I had this problem myself. Mike's answer is close, but not perfect in my opinion: it empties elements, even if a value attribute may want to set it.

On pageload, I do the following. It uses only a little jQuery.

// Reset input elements to their HTML attributes (value, checked)
$("input").each(function(){
    // match checkbox and radiobox checked state with the attribute
    if((this.getAttribute('checked')==null) == this.checked)
        this.checked = !this.checked;
    // reset value for anything else
    else this.value = this.getAttribute('value')||'';
});

// Select the option that is set by the HTML attribute (selected)
$("select").each(function(){
    var opts = $("option",this), selected = 0;
    for(var i=0; i<opts.length; i++) 
        if(opts[i].getAttribute('selected')!==null) 
            selected = i;

    this.selectedIndex = selected||0;
}); 

No jQuery?

Use document.getElementsByTagName to select the inputs and selects, then iterate over them and replace this by the iterated element.
Select the options with .getElementsByTagName('option').

Protease

Not enough jquery :) – Destroyer

Answer 7

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

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

before your real password input.

Angeliaangelic

Answer 8

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!

Musso

Answer 9

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.

Sinapism

Yeah, it looks like this would work, but the problem (for me) is wider than just username/password fields. – Jagatai

Answer 10

This actually works with a password field in FireFox:

$(window).load(function(){
    $('#pass').val('');
});

Sparry

Answer 11

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

Delimitate

It's actually a problem if you refresh the page. So, we have an input, hidden or otherwise that has been populated with a value maybe via javascript. If the user refreshes the page, that input is re-populated by Firefox with the value pre-refresh. So when submit eventually happens, we don't know if the user put it there or Firefox did. – Jagatai