9

Okay, so I know how this autocomplete="off" tag is supposed to work on all inputs except a password field and I have searched for an answer to my specific problem but it looks like I'm the only one with this problem. I know I can add it to the form element or to an individual input-element. My doctype is set as: <!DOCTYPE html>.

I have a form with 2 questions (simplified for this example): Name and Phone. For testing purposes I have added the autocomplete="off" to both fields AND the form element.

This is my form:

<form id="myform" autocomplete="off">
    <input autocomplete="off" type="text" name="name" />
    <input autocomplete="off" type="text" name="phone" />
</form>

The form totally ignores the autocomplete="off" and suggests my name and phone number.

Does anybody have any idea?

Screen-shot

Improve this question
6
  • it might be browsers autofill setting. Not Sure though.
    – Ganesh Salunkhe
    Commented Apr 3, 2015 at 13:04
  • I can't speak Dutch but it seems you've configured Google Chrome to auto-complete your street address (click on the Instellingen voor automatisch aanvullen in Chrome link to reach the settings).
    – Álvaro González
    Commented Apr 3, 2015 at 13:25
  • Thanks Alvaro, but I never touch any browser settings. So this must be default behavior. I'll investigate this a bit further though. Although I guess that this is the whole idea of the autocomplete="off" function, right? If anyone has this set-up in their browser, that the autocomplete gets prevented anyway.
    – Dennis van Rooij
    Commented Apr 3, 2015 at 13:41
  • stackoverflow.com/a/29582380/4462191 possible duplicate?
    – camiblanch
    Commented May 6, 2015 at 16:01
  • developer.mozilla.org/en-US/docs/Web/Security/…
    – Dom
    Commented Dec 22, 2016 at 22:17

10 Answers 10

Reset to default
18

The solution is actually very simple:

autocomplete="__away"

What we have done is tell any browser to completely ignore the field since __away is an air value - does not exist.

Improve this answer
5
  • amazing elegant solution!
    – ina
    Commented Dec 8, 2020 at 2:16
  • 2
    Can you point to some more information about "...since __away is an air value..." ?
    – Luke
    Commented Dec 8, 2020 at 15:58
  • @Luke It just means it is an non-existing value. autocomplete="luke" also works.
    – Justin
    Commented Jan 20, 2022 at 13:57
  • If it works for any unknown value, why wouldnt it work for "off". Why in the world would it accept off as "on"
    – David Latty
    Commented Feb 15, 2022 at 1:44
  • @DavidLatty, because Chrome purposefully chooses to ignore the value off, its a special value they detect, and then choose to ignore. They reckon they know how our website should work better than the designer.
    – run_the_race
    Commented Mar 24, 2022 at 19:06
3

Chrome unfortunately decided to ignore autocomplete="off", making it difficult on developers in hopes of maybe making some thing easier for typical users.

...we started ignoring autocomplete=off for Chrome Autofill data

Source: https://bugs.chromium.org/p/chromium/issues/detail?id=468153 (2015)

Is there a solution?

Not really... That comment continues:

In cases where you really want to disable autofill, our suggestion at this point is to utilize the autocomplete attribute to give valid, semantic meaning to your fields. If we encounter an autocomplete attribute that we don't recognize, we won't try and fill it.

But that doesn't seem to work anymore (as of Chrome 53). From the discussion here - Chrome Browser Ignoring AutoComplete=Off - as well as my own testing, there seems to no longer be a way to turn off autofill without using some kind of hack.

Improve this answer
1
  • 1
    Even autocomplete="__away" doesn't work anymore. This is infuriating because Chrome and Edge are assuming that as developers we're stupid and they know all possible use cases and have decided in their infinite wisdom that there's no possible reason for wanting to turn it off, and when their browsers start filling fields with data that doesn't make sense we have no way to control it.
    – Vincent
    Commented Jan 14, 2021 at 18:03
2

Try setting autocomplete="new-password" in the password element. This works for chrome only

Improve this answer
1

Many modern browsers do not support autocomplete="off".

This is the behavior in Firefox (since version 38), Google Chrome (since 34), and Internet Explorer (since version 11).

Improve this answer
1

Try this:

$(document).ready(function(){
    $( document ).on( 'focus', ':input', function(){
        $( this ).attr( 'autocomplete', 'off' );
    });
});

Or this:

$(document).ready(function(){ 
    $("input").attr("autocomplete", "off");
});

On the other hand, you might have a look at this Chrome Browser Ignoring AutoComplete=Off.

Improve this answer
5
  • Thanks Murat. Forgot to mention that this is something that I already tried. Doesn't make any difference.
    – Dennis van Rooij
    Commented Apr 3, 2015 at 13:43
  • It is very strange. Because I created a demo and tried on three different browser. Have a look at please: jsfiddle.net/fYe2p/7
    – Murat Yıldız
    Commented Apr 3, 2015 at 14:08
  • Yeah I know... That's exactly why it drives me insane. I have disabled all javascript that handles the form. I have removed other elements surrounding the fields. There must be something I'm missing. But I don't know what that is...
    – Dennis van Rooij
    Commented Apr 3, 2015 at 14:13
  • Did you try to delete the browser history and retry again?
    – Murat Yıldız
    Commented Apr 3, 2015 at 14:15
  • I have this form in a Foundation Reveal modal. If I place fields with the same names outside of the modal (so directly visible on page). The autocomplete works. I have tried showing the modal right away (instead of visibility:hidden), but that didn't change a thing. So it's caused by something else... but what...
    – Dennis van Rooij
    Commented Apr 3, 2015 at 14:24
0

Try This: 

<form id="myform" autocomplete="dummy-no-auto-complete-fix">
    <input autocomplete="dummy-no-auto-complete-fix" type="text" name="name" />
    <input autocomplete="dummy-no-auto-complete-fix" type="text" name="phone" />
</form>
Improve this answer
1
  • That worked in chrome for me, but then firefox started allowing autocomplete, so it doesn't really help.
    – Jon Ediger
    Commented Aug 12, 2019 at 16:15
0

I just fix it with 

<form autocomplete="off">
your inputs
</form>

so you need autocomplete="off" in your <form> and not only in <input>

Improve this answer
2
  • 1
    That doesn't matter at all. Chrome still ignores it.
    – Jon Ediger
    Commented Aug 12, 2019 at 16:13
  • also i just think wrapping each separate input in form doesn't make sense
    – ina
    Commented Dec 8, 2020 at 2:18
0

It appears that Chrome now ignores autocomplete="off" unless it is on the tag since v34.

you can't cheat by create an hidden input over. Auto complete feature will get the first input text to fill data.

Method:1

You Can Try This One


<form id="" method="post" action="" autocomplete="off">
    <input type="text" style="display:none" />
    <input type="password" style="display:none">
    <asp:textbox autocomplete="off">
</form>

Improve this answer
0

I had success with the following UGLY hack:

  1. Convert the "username and password" <input> fields to <textarea> fields

  2. Set both the rows="1" property and the resize:none; style property on them and style them with CSS to match the look and feel of your input fields.

  3. Add the following CSS properties to the password field to mask the input properly:

    style="-webkit-text-security: disc; -moz-text-security: disc; text-security: disc;"

In my case, the browser then ignores them. I'm not sure how long this hack will work.

Here's a full example of it working:

<form>

<label>
  <div>Username:</div>
  <textarea
    placeholder="Your Username"
    name="username"
    rows="1"
    style="resize: none;"
  ></textarea>
</label>

<label>
  <div>Password:</div>
  <textarea
    placeholder="Your Password"
    name="password"
    rows="1"
    style="resize: none; -webkit-text-security: disc; -moz-text-security: disc; text-security: disc;"
  ></textarea>
</label>

<br />

<button type="submit">Login</button>

</form>

Improve this answer
-1

"off" is not working at all. I thing browser saved forms knows "off" as input identifier not a setting value. So you need random string to make browser thing that it a new input, input you see first time

$(document).ready(function(){
    $( document ).on( 'focus', ':input', function(){
        let text = "";
        let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";

        for (let i = 0; i < 20; i++)
            text += possible.charAt(Math.floor(Math.random() * possible.length));
        $( this ).attr( 'autocomplete', text );
    });
});
Improve this answer
1
  • "off" is not working at all. I thing browser saved forms knows "off" as input identifier not a setting value. So you need random string to make browser thing that it a new input, input you see first time.
    – Tonci14
    Commented Oct 5, 2018 at 15:18

Not the answer you're looking for? Browse other questions tagged or ask your own question.