autocomplete ='off' is not working when the input type is password and make the input field above it to enable autocomplete
Browser's normally have two related yet different features regarding forms:
Form auto-complete, where items of
<input type="text">
type (and similar) collect typed values and offer them back in the form of a drop-down list.
(It's a simple feature that works pretty well.)Password manager, where browser prompts to remember username/password combinations when it detects you've submitted a login form. When returning to the site, most browsers display available usernames in a drop-down box (Firefox, Chrome, Internet Explorer...) but some have a toolbar button (Opera). Also, Chrome highlights the fields in hard-coded yellow.
(This depends on heuristics and might fail on certain pages.)
There's an edge case with forms tagged as autocomplete="off"
. What happens if it's a login form and the user has previously stored a username/password? Actually removing the password from the local database looks like inappropriate so probably no browser does so. (In fact, data from form auto-complete is not erased either.) Firefox decides to give power to the user: you have a password, so I'll let you use it. Chrome decides to give power to the site.
autocomplete= off not working in chrome
It appears that Chrome now ignores autocomplete="off" unless it is on the <form autocomplete="off">
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:
<form id="" method="post" action="" autocomplete="off">
<input type="text" style="display:none" />
<input type="password" style="display:none">
<asp:textbox autocomplete="off">
</form>
So put this before your textbox.
<input type="text" style="display:none" />
Method 2:
Change
autocomplete="off"
to
autocomplete="false"
Method 3:
Browser autofill in by readonly-mode.
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
Method 4:
For username password combinations. Chrome heuristics looks for the pattern.
<input type="text" onfocus="this.type='password'">
Method 5:
jQuery
if ($.browser.webkit) {
$('input[name="password"]').attr('autocomplete', 'off');
$('input[name="email"]').attr('autocomplete', 'off');
}
2019, Chrome 76, approach to autocomplete off
Update, January 2020: It appears that as of Chrome 79, Autocomplete (as defined here) no longer treats autocomplete="some-unrecognised-value"
as equal to autocomplete="on"
, so autocomplete="nope"
or similar is now effective at disabling both Autocomplete and Autofill.
Update, April 2020: They changed it again. As of Chrome 81, autocomplete="some-unrecognised-value"
is no longer effective at disabling the Autocomplete mechanism. However, Autofill now seems to be a lot more conservative than it was before - it still doesn't follow the spec (a field with name="email"
and autocomplete="off"
will still receive Autofill suggestions) but it doesn't offer up spurious address fragments on random form fields. My recommendation right now would therefore be to use autocomplete="off"
. If you want to do that on a field named email
, you're probably out of luck though :-(
TL,DR: There appears to be no setting for the autocomplete
attribute that will reliably turn off all autocomplete dropdowns. However, the circumstances that have led to this are quite convoluted and worth documenting, to hopefully clear up the masses of conflicting advice...
There are two distinct mechanisms present in current (76.0.3809.132) versions of Chrome, which we'll refer to as Autofill and Autocomplete (not necessarily their official names):
Autofill
The Autofill feature attempts to fill in forms using the address information stored in your browser settings. It can be identified by the "Manage addresses..." option (or similar) at the bottom of the dropdown. This feature does not honour autocomplete="off"
or autocomplete="false"
, as a deliberate decision on the part of the Chrome developers.
In a statement outlining this decision, zkoch offered this workaround:
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.As an example, if you have an address input field in your CRM tool
that you don't want Chrome to Autofill, you can give it semantic
meaning that makes sense relative to what you're asking for: e.g.
autocomplete="new-user-street-address". If Chrome encounters that, it
won't try and autofill the field.
This is the basis of attempted solutions such as autocomplete="nope"
; the Autofill mechanism will skip any fields with autocomplete
attribute values it doesn't recognise.
The code that implements this decision, for the record: https://chromium.googlesource.com/chromium/src/+/refs/tags/78.0.3903.1/components/autofill/core/browser/form_structure.cc#1218
Autocomplete
The Autocomplete feature provides a dropdown of previously-submitted values from this form field. This dropdown does not have a "Manage addresses..." option. Autocomplete does honour the autocomplete="off"
or autocomplete="false"
attribute; any other value (including 'invalid' ones such as autocomplete="nope"
) will leave it enabled.
Conclusion
Autocompletion dropdowns cannot be turned off through the autocomplete
dropdown; any value that disables Autofill will leave Autocomplete enabled, and vice versa. Anyone who thinks they've found a working solution (either through autocomplete
or some other method such as CSS hacks) should check that it works against both mechanisms.
Unfortunately it's probably going to be an uphill struggle to convince Chrome's developers that this is broken. The developers of Autofill apparently believe that they made a calculated decision to break autocomplete="off"
while offering web developers an alternative; that alternative is broken, for more subtle reasons than they realise. From their perspective, the resulting howls of protest are coming from disgruntled developers too lazy to jump through one little hoop and update their autocomplete="off"
attributes. In all the noise, the message isn't getting through: the hoop is broken.
Related Topics
How to Create Links With 'Target="_Blank"' in Markdown
Why Does Margin-Top Work With Inline-Block But Not With Inline
Space Between Nowrap Inline Blocks
What Are the Allowed Tags Inside a ≪Li≫
How to Align Two Elements on the Same Line Without Changing HTML
Bootstrap 3 to Bootstrap 4 Cols No Longer Horizontally Aligned
How Does the Vertical-Align Property Work
Format HTML Table Cell So That Excel Formats as Text
How to Install a Custom Font on an HTML Site
What Characters Can Be Used For Up/Down Triangle (Arrow Without Stem) For Display in Html
Adding External CSS in an HTML File
Color of Stacked Semi-Transparent Boxes Depends on Order
How to Set Default Value to the Input[Type="Date"]
Space Between Two Rows in a Table
How to Vertically Center Text in a Dynamically Height Div
How to Rotate and Postion an Element on the Top Left or Top Right Corner