Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I've just found that if you have a remembered username and password for a site, the current version of Chrome will autofill your username/email address into <em>the field before</em> any <code>type=password</code> field. It does not care what the field is called - just assumes the field before password is going to be your username.</p> <p><strong>Old Solution</strong></p> <p>Just use <code>&lt;form autocomplete="off"&gt;</code> and it prevents the password prefilling as well as any kind of heuristic filling of fields based on assumptions a browser may make (which are often wrong). As opposed to using <code>&lt;input autocomplete="off"&gt;</code> which seems to be pretty much ignored by the password autofill (in Chrome that is, Firefox does obey it).</p> <p><strong>Updated Solution</strong></p> <p>Chrome now ignores <code>&lt;form autocomplete="off"&gt;</code>. Therefore my original workaround (which I had deleted) is now all the rage.</p> <p>Simply create a couple of fields and make them hidden with "display:none". Example:</p> <pre><code>&lt;!-- fake fields are a workaround for chrome autofill getting the wrong fields --&gt; &lt;input style="display:none" type="text" name="fakeusernameremembered"/&gt; &lt;input style="display:none" type="password" name="fakepasswordremembered"/&gt; </code></pre> <p>Then put your real fields underneath.</p> <p>Remember to add the comment or other people on your team will wonder what you are doing!</p> <p><strong>Update March 2016</strong></p> <p>Just tested with latest Chrome - all good. This is a fairly old answer now but I want to just mention that our team has been using it for years now on dozens of projects. It still works great despite a few comments below. There are no problems with accessibility because the fields are <code>display:none</code> meaning they don't get focus. As I mentioned you need to put them <em>before</em> your real fields.</p> <p>If you are using javascript to modify your form, there is an extra trick you will need. Show the fake fields while you are manipulating the form and then hide them again a millisecond later. </p> <p>Example code using jQuery (assuming you give your fake fields a class):</p> <pre><code> $(".fake-autofill-fields").show(); // some DOM manipulation/ajax here window.setTimeout(function () { $(".fake-autofill-fields").hide(); },1); </code></pre> <p><strong>Update July 2018</strong></p> <p>My solution no longer works so well since Chrome's anti-usability experts have been hard at work. But they've thrown us a bone in the form of:</p> <pre><code>&lt;input type="password" name="whatever" autocomplete="new-password" /&gt; </code></pre> <p>This works and mostly solves the problem. </p> <p>However, it does not work when you don't have a password field but only an email address. That can also be difficult to get it to stop going yellow and prefilling. The fake fields solution can be used to fix this.</p> <p>In fact you sometimes need to drop in two lots of fake fields, and try them in different places. For example, I already had fake fields at the beginning of my form, but Chrome recently started prefilling my 'Email' field again - so then I doubled down and put in more fake fields just before the 'Email' field, and that fixed it. Removing either the first or second lot of the fields reverts to incorrect overzealous autofill.</p>
    singulars
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
    3. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload