Disable form autofill in Chrome without disabling autocomplete

Question

How can we disable Chrome's autofill feature on certain <input>s to prevent them from being automatically populated when the page loads?

At the same time I need to keep autocomplete enabled, so the user can still see the list of suggestions by clicking on the input or typing in it. Can this be done?

EDIT: Feel free to use plain Javascript or jQuery if you feel it is necessary or you feel like it would make your solution simpler.

Solution 1

Here's the magic you want:

    autocomplete="new-password"

Chrome intentionally ignores autocomplete="off" and autocomplete="false". However, they put new-password in as a special clause to stop new password forms from being auto-filled.

I put the above line in my password input, and now I can edit other fields in my form and the password is not auto-filled.

Solution 2

A little late, but here's my fool proof solution useful for pages like the sign up/registration page where the user has to input a new password.

<form method="post">
    <input type="text" name="fname" id="firstname" x-autocompletetype="given-name" autocomplete="on">
    <input type="text" name="lname" id="lastname" x-autocompletetype="family-name" autocomplete="on">
    <input type="text" name="email" id="email" x-autocompletetype="email" autocomplete="on">
    <input type="password" name="password" id="password_fake" class="hidden" autocomplete="off" style="display: none;">
    <input type="password" name="password" id="password" autocomplete="off">
</form>

Chrome will detect two password inputs and will not auto fill the password fields. However, the field id="password_fake" one will be hidden via CSS. So the user will only see one password field.

I've also added some extra attributes "x-autocompletetype" which is a chrome experimental specific auto fill feature. From my example, chrome will autofill in the first name, last name and email address, and NOT the password field.

Solution 3

Fix: prevent browser autofill in

 <input type="password" readonly onfocus="this.removeAttribute('readonly');"/>

Update: Mobile Safari sets cursor in the field, but does not show virtual keyboard. New Fix works like before but handles virtual keyboard:

<input id="email" readonly type="email" onfocus="if (this.hasAttribute('readonly')) {
    this.removeAttribute('readonly');
    // fix for mobile safari to show virtual keyboard
    this.blur();    this.focus();  }" />

Live Demo https://jsfiddle.net/danielsuess/n0scguv6/

// UpdateEnd

Explanation Instead of filling in whitespaces or window-on-load functions this snippet works by setting readonly-mode and changing to writable if user focuses this input field (focus contains mouse click and tabbing through fields).

No jQuery needed, pure JavaScript.

Solution 4

After a lot of struggle, I have found that the solution is a lot more simple that you could imagine:

Instead of autocomplete="off" just simply use autocomplete="false" ;)

Try this...

$(document).ready(function () {
    $('input').attr('autocomplete', 'false');
});

Solution 5

I stumbled upon the weird chrome autofill behaviour today. It happened to enable on fields called: "embed" and "postpassword" (filling there login and password) with no apparent reason. Those fields had already autocomplete set to off.

None of the described methods seemed to work. None of the methods from the another answer worked as well. I came upon my own idea basing on Steele's answer (it might have actually worked, but I require the fixed post data format in my application):

Before the real password, add those two dummy fields:

<input type='text' style='display: none'>
<input type='password' style='display: none'>

Only this one finally disabled autofill altogether for my form.

It's a shame, that disabling such a basic behavior is that hard and hacky.

View more solutions

Comments

[Elias Zamaria]

I am willing to consider this although I am worried that it may cause problems in case someone wants to actually enter " " as a value.

[Nimphious]

You can use different whitespace characters. Such as an EM space. I simply used normal spaces as an example.

[Nimphious]

I've updated the example to be more chrome-friendly, and to use an EM space.

[Nimphious]

I'm going to go ahead and add comments to the code. Let me know if there's something you want me to explain in more detail.

[Elias Zamaria]

I am not sure if I like your 2nd solution. It seems like if there is any value that is actually in the value attribute in the code coming from the server, that will be erased. I am not trying to erase any value in the input, only inputs that are autofilled.

[Nimphious]

If you have a value filled in then you don't need to use this method to stop it from auto filling. This would be a lot easier if you actually showed the code you're working with.

[Elias Zamaria]

What if I have some inputs with values filled in and some without? I will need to make some code that fills only the ones without values, and it can get tricky and complicated. So far, your first solution is the best answer I found here.

[Elias Zamaria]

The code I have is somewhat complex and uses some server-side code to populate the inputs.

[Nimphious]

The problem is, OP wants only the auto-fill disabled, they still want the user to be able to auto-complete the form with data previously entered.

[Uğur Gümüşhan]

@Nimphious I think this solution does what you described.

[Nimphious]

Does it? I haven't tested it, but don't the auto-fill and auto-complete both work off the name attribute? If so, removing the name attribute would disable both.

[Uğur Gümüşhan]

@Nimphious the first input has no name. You think that disables autocomplete?

[Elias Zamaria]

This is not helpful. It disables autofill but it also disables autocomplete. See my question.

[Elias Zamaria]

This looks strange. I don't know if those nested quotes will cause problems, and I don't know if it is valid to begin an id attribute with a digit. Also, I think that picking a strange name like that will disable autocomplete, which I am not trying to do.

[Jeffery To]

@mikez302 Removing the autocomplete attribute restores autocomplete, see jsfiddle.net/jefferyto/fhT9m. Perhaps you can try it before downvoting.

[Elias Zamaria]

I tried it and it did not disable autocomplete for me. I don't know why. It seems like it would work.

[Elias Zamaria]

I tested your solution some more and it is behaving strangely. Typing in the box does not trigger the autocomplete suggestions but pressing the down arrow key in the box while it is empty does. This is stranger and more complicated than I thought it would be. Sorry for downvoting your answer. I thought you just didn't understand the question.

[Jeffery To]

@mikez302 Can you post a jsFiddle with the behaviour that you're are seeing?

[Elias Zamaria]

This seemed to keep autofill enabled. It just prevented the background of the input from turning yellow like it usually does with autofill.

[einstein]

Only solution working for me.

[Brilliand]

Messy, but at least it worked. Interestingly, I also have autocomplete="off" set on this form, and while that worked for Firefox, it wasn't enough for Chrome (possibly for good reason).

[Anas]

I want to stop the auto fill, and this answer did the trick, but how it works?

[stephenkelzer]

What happens when javascript is not turned on? Then the users passwords are visible for all the peering eyeballs! Oh no!!

[Aleksandr Sabov]

@StephenKelzer right, good point

[HFR1994]

A little late but...It disables the entire form not just one input

[Meelah]

@HFR1994, you could fix that by changing it to $('input#password').attr('autocomplete', 'false');

[HFR1994]

@Meelah thumbs up, your right

[Miguel]

down side of this, is that the "empty fields" verification, that works by comparing the value with empty-ness won't just work right..?

[Alex Yuly]

This is the correct solution, if your goal is to prevent a password autofill.

[tschoffelen]

From a usability and accessibility standpoint, this is the only acceptable solution.

[Daniel Gray]

This gets around a lot of the strange heuristic Chrome idiocy... thanks a lot! It's finally not auto-completing the username in the search field!!

[My1]

but wont new-password iirc also kill the autocomplete? the title said that this excplicitly should NOT happen.

[Mirror318]

@My1 I think you're right. To Chrome, they are two parts of the same feature. So this answer is for people trying to disable both

[AndrewLeonardi]

Finally! Only thing I've found that works. Nice

[Yousef Altaf]

This don't work with chrome 88