Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ng-form and autocomplete="off"

Tags:

html

angularjs

I have an angular form like this

<ng-form name="AddTaskForm" autocomplete="off">
   ......
</ng-form>

However when I begin entering data, chrome is still prompting me with previously entered values.

How can I prevent chrome (and all browsers) from showing any drop down on my input with previously entered values?

I did some search and found that people were writing custom directives, but not sure if this is really required.

enter image description here

like image 657
Knows Not Much Avatar asked Sep 13 '14 12:09

Knows Not Much


People also ask

How do I turn off Ng autocomplete?

Disabling the autocomplete To disable the autocomplete for input fields, we need to set its autocomplete attribute to off . We can also disable the autocomplete for an entire form, instead of a specific input field by setting an autocomplete="off" to the html <form> element.

What is form autocomplete off?

The autocomplete attribute specifies whether a form should have autocomplete on or off. When autocomplete is on, the browser automatically complete values based on values that the user has entered before. Tip: It is possible to have autocomplete "on" for the form, and "off" for specific input fields, or vice versa.

How do I turn off autocomplete in edge?

Turn off Autofill in Microsoft Edge Open Microsoft Edge. Select the More actions button (indicated by 3 horizontal dots) . Select Settings → Profiles. Select Personal info, and move the "button" to the left, which will disable saved addresses.


1 Answers

Despite autocomplete being a pretty well defined part of the HTML5 spec, Chrome has flip-flopped on how they use the autocomplete property. Originally honoring autocomplete="off" (2013), they then decided that developers must be using it wrong and the browser should just ignore it.

This doesn't mean there aren't very valid cases where you don't want the browser autofilling data (e.g. on CRM systems), but by and large, we see those as the minority cases. And as a result, we started ignoring autocomplete=off for Chrome Autofill data.

(Source: Chromium bug from 2015 marked as WontFix)

According to the Priority of Constituencies:

In case of conflict, consider users over authors over implementors over specifiers over theoretical purity. In other words costs or difficulties to the user should be given more weight than costs to authors; which in turn should be given more weight than costs to implementors...

...Which leaves us developers in the unfortunate spot of finding a work-around. This article from MDN outlines the current state well, and offers this solution of setting autocomplete to new-password:

If an author would like to prevent the autofilling of password fields in user management pages where a user can specify a new password for someone other than themself, autocomplete="new-password" should be specified, though support for this has not been implemented in all browsers yet.

I'm not sure how long this will remain valid, but for now (tested in Chrome 53 in September 2016) this is the easiest solution:

<input type="password" name="someName" autocomplete="new-password" />

Edit: Note: This has the side-effect of asking the user to save the password, possibly overwriting an existing password. So while it does "prevent the autofilling of password fields" it does not remove the element from the autocomplete mess altogether.

Edit: Updated Info: Newer versions of Chrome once again respect the autocomplete=off attribute, as Alexander Abakumov pointed out in his answer. He had it working for Chrome 68, works on Chrome 70 for me.

like image 104
Luke Avatar answered Sep 18 '22 12:09

Luke