autocomplete="off" onto <form> element;<input> with autocomplete="false" as a first children element of the form.<form autocomplete="off" method="post" action="">
<input autocomplete="false" name="hidden" type="text" style="display:none;">
...This formation is going to prevent Chrome and Firefox to offer autofill and autocomplete for all input fields inside the form.
For those who stumbled here like I did many times, this works (at least for now):
<input role="presentation" autocomplete="off" />You don't need to delete ID or have dynamic names.
most clean solution!
Just FYI: role presentation will hide the input from screen readers. Making your form inaccessible. :\
Yip, @graphical-iain, just another hack attempt.
@johan44co, rather go comment here https://issues.chromium.org/issues/40910184.
What works in Chrome is the following:
<input type="text" autocomplete="new-text" />
<input type="number" autocomplete="new-number" />
<input type="password" autocomplete="new-password" />
I tested everything that was suggested here, and the only thing that really worked was applying the autocomplete="off" to the form wrapping the fields. I won't allow the browser to autocomplete. And if you don't have the <form>, you must add it like this:
<form autoComplete='off'>Applying only to the fields did not work for me.
This works for me on fresh Chrome v. 122.0 (more info here)
<input autocomplete="nope" ... />(I test it in my angular dropdown component - works also without <form> wrapper)
<form autocomplete="off">
<input type="text" name="username" autocomplete="off" />
<!--OR-->
<input type="text" name="email" autocomplete="off" />
<input type="password" name="password" autocomplete="new-password" />
</form>
You can try this...
<form action="" autocomplete="off">
<input type="text" required autofocus aria-autocomplete="none">
<input type="text" required aria-autocomplete="none">
</form>
What works in Chrome is the following:
<input type="text" autocomplete="new-text" /> <input type="number" autocomplete="new-number" /> <input type="password" autocomplete="new-password" />
this worked!
Also i have thw autocomplete="off" on the form field
This still working fine for me
<form autocomplete="off"> <input type="text" name="username" autocomplete="off" /> <!--OR--> <input type="text" name="email" autocomplete="off" /> <input type="password" name="password" autocomplete="new-password" /> </form>
Best solution so far, worked great for me. Thx!
none of the above works for me :(
Strap in, this is a huge pain, but I figured out what's happening!
Apparently Chrome is using the label AND the id AND the name to help determine what to autofill. And I think it fills it if it finds a keyword in either of the two.
If your control name/id is "blah" and your label is "Username" - Chrome autofills
If your control name/id is "blah" and your label is "Usernaasme" - Chrome autofills (I think its looking for the word 'user')
If your control name/id is "blah" and your label is "Usasername" - Chrome doesnt autofill
If your control name/id is "username" and your label is "Usasername" - Chrome autofills
So it seems that both the label/id/name of the inputs need to not include the special words that Google is looking for.
I hope this saves someone else the hours it took me.
If you are using a stand alone
<input>element, I've found that setting autocomplete="off, no, nope, false, blah, blah, whatever" does not work.However,
<input autocomplete="off">will work if nested inside a<form>element.I may be off on this... but this is what worked for me after testing many of the suggested solutions posted here.
It works, thanks
Strap in, this is a huge pain, but I figured out what's happening!
Apparently Chrome is using the label AND the id AND the name to help determine what to autofill. And I think it fills it if it finds a keyword in either of the two.
If your control name/id is "blah" and your label is "Username" - Chrome autofills If your control name/id is "blah" and your label is "Usernaasme" - Chrome autofills (I think its looking for the word 'user') If your control name/id is "blah" and your label is "Usasername" - Chrome doesnt autofill If your control name/id is "username" and your label is "Usasername" - Chrome autofills
So it seems that both the label/id/name of the inputs need to not include the special words that Google is looking for.
I hope this saves someone else the hours it took me.
Interesting find. Thank you. I have been struggling with this for a long time.
If the requirement is to prevent form auto-filling, the following solutions are effective for me. ( chrome : 126.0.6478.127, Firefox: 127.0.2)
<form>
<input type="text" name="username" autocomplete="off" />
<input type="password" name="password" autocomplete="new-password" />
</form>For input type=‘text’, autocomplete="off" works,
For input type=‘password’, autocomplete="new-password" works.
But I want to disable password suggestions, the above solutions do not work. In the end, Instead of using a regular password input field, I used a text input field. When entering, it converts plaintext into ••• while storing the actual input .
most clean solution!