HTML Form / Input Autocomplete off - html

Autocomplete has been causing me trouble for quite some time. It overlays buttons and search results which causes users to click it instead of a link on the webpage.
I have been searching the internet for solutions to this for literally years. None of them are both practical and work consistently. I have tried all the alternatives to "off" listed throughout the relevant Google searches.
Below I have uploaded a GIF. The GIF shows me triggering autocomplete on an input which has autocomplete set to off.
I then remove the name attribute of a separate input within the form and suddenly autocomplete switches off.
I also demonstrate that having the keyword "Company" in the placeholder seems to override autocomplete=off. However, this does not seem to override autocomplete=off in all situations.
In the below example I used a datepicker, but I can also reproduced the problem with simple text inputs.
Is there a reason behind this strange behavior?
One solution is to use type="search", however, this may not be the desired approach for all developers.
Thanks in advance.

Have you tried this ?
<input name="unm" id="unm" type="text" autocomplete="false" readonly onfocus="this.removeAttribute('readonly');" />

Try using a form method.
<form method="post" action="">
<div>
<label for="cc">Please work:</label>
<input type="text" id="cc" name="cc" placeholder="Enter a company here" autocomplete="off">
</div>

Related

Chrome autocomplete? options

For a few months now we've been seeing the following dropdown for most of our HTML input boxes. Our input boxes have generic names e.g. Field1, Field2 and Field1 on one form is not the same as Field1 on another form, so the options provided are usually senseless.
Example dropdown
Anybody know how to turn this functionality off?
I don't know what to call it. I've tried searching for autocomplete and autofill but not sure if either of those terms are what is happening.
well in the past autocomplete="chrome-off" always did the job, but for other browsers sometimes it does not work, so first try these two solutions and if they don't work try autocomplete="chrome-off".
<form autocomplete="off">
<input type="text" id="YourId" autocomplete="none"/>
</form>
or
<form autocomplete="false">
<input type="text" id="YourId" autocomplete="none"/>
</form>
I hope it helps.
It is autocomplete and I managed to turn it off with:
autocomplete="off"
think I'd been trying "none" before.

How do I disable or prevent input text suggestions for form fields in Edge?

How do I prevent a form from suggesting auto-complete values, from previous entries or from saved information in Edge?
In the above image, the email input field is marked as autocomplete="false", but still in the right pane you can see the suggestion is populating.
When I add autocomplete=disabled to one field it seems it work, but when I add the attribute to all the inputs, it again starts displaying suggestions for every field.
What is the solution for this?
Add the aria-autocomplete="list" attribute to the input.
<input type="text" id="FirstName" name="attr1" aria-autocomplete="list">
Do not use any other value for the attribute.
According to your description, I reproduced the problem. I think your issue is caused by the "Save and fill personal info" setting being enabled in Edge.
If you navigate to edge://settings/personalinfo and disable this feature, you can see this behavior no longer exists.
Or you can also click the "Manage personal info" option in the picture you provided, and then disable it.
I did some simple tests and found that if you need to solve the problem from the code, you need to modify the name attribute of the form's related field.
Like this(do not use attribute values like name or email... and maybe there are others I am not aware of):
<label for="attr1">attr1:</label>
<input type="text" id="FirstName" name="attr1">
<label for="attr2">attr2 :</label>
<input type="text" id="LastName" name="attr2">
<label for="attr3">attr3 :</label>
<input type="email" id="Email" name="attr3" autocomplete="off">
<input type="submit">
I don't recommend this, because good naming helps you understand and maintain the code. Using proper attributes like name and email also helps your code be more accessible for screen readers or other assistive technology.

Disable auto-suggestions in individual input fields in Chrome based on history

On HTML inputs in Chrome, how can the autofill be disabled for individual fields?
See the image below to see the issue. I'm using the Date/Time dropdown for bootstrap (but this can be for any plugin)
Chrome seems to cache the previously entered input when the form is submitted. So when the user comes back to the page again, this creates a UX issue.
What I've tried so far,
<input type="text" class="form-control js-datetime-picker" autocomplete="new-field">
<input type="text" class="form-control js-datetime-picker" autocomplete="off">
<input type="text" class="form-control js-datetime-picker" autocomplete="false">
How can the auto-suggestions be disabled for a single field (not the whole form)?
UPDATE:
Since posting, I've found out this is a bug (branded as a feature) on Chrome, and the discussion is ongoing. If anyone has a solution, without using additional hidden fields or Javascript, please share.
https://bugs.chromium.org/p/chromium/issues/detail?id=587466
On the form parent of the input elements (add one if there isnt one already) add this autocomplete='off' and then on the inputs add autocomplete='false'.
And to answer your question, 'can individual fields be disabled without the whole form' Yes. But you would need to add another form onto the child element.
Cheers.
You can deactivate the autocomplete with autocomplete="new-password"
autocomplete="off" or autocomplete="false" is not working anymore
autocomplete="off" is the right solution. In your case I think there is some problem with Chrome browser. Update chrome or reinstall. That might solve your problem.

How to disable autofill in chrome v72.0.3626.109 non-input password

After update chrome to version 72.0.3626.109, tag autocomplete off stopped work,
I'm trying use autocomplete='somestring', but not work.
Follow the image:
I tried autocomplete="false", autocomplete="off" and plugin for disable autofill, use jQuery to add attribute autocomplete, but not worked!
Sorry for my english.
I struggled with something very similar and found this question while I was searching for answers, here's how I fixed it.
My situation: I have an input field for searching, and somewhere else I had a username and password field. Chrome recently started putting the autocompleted username in the search field.
Apparently, Chrome ignores autocomplete="off" now, and goes by the string value to try to determine what type of data to autocomplete. So if you have a search box, you should put autocomplete="search" so Chrome won't put the username in there, for example.
When I first noticed a long time ago autocomplete="off" was being ignored for my search box, I switched to autocomplete="search" and that worked. Now, Chrome started putting the username in the search box again with the latest update.
The way to fix this, if your situation is similar, is to put the autocomplete field for all of your text inputs with a string describing what it is.
BEFORE:
<input id='search' type='text' autocomplete="search">
And somewhere else on the page...
<input id='login_username' type='text'>
<input id='login_password' type='password'>
AFTER
<input id='search' type='text' autocomplete="search">
And somewhere else on the page...
<input id='login_username' type='text' autocomplete="username">
<input id='login_password' type='password' autocomplete="password">
Additionally, putting the inputs in a form also affects the autocomplete, but I didn't have too much time to mess with that and I needed a quick fix to get my site working properly again. Hope this helps someone.

Chrome ignores autocomplete="off"

I've created a web application which uses a tagbox drop down. This works great in all browsers except Chrome browser (Version 21.0.1180.89).
Despite both the input fields AND the form field having the autocomplete="off" attribute, Chrome insists on showing a drop down history of previous entries for the field, which is obliterating the tagbox list.
Prevent autocomplete of username (or email) and password:
<input type="email" name="email"><!-- Can be type="text" -->
<input type="password" name="password" autocomplete="new-password">
Prevent autocomplete a field (might not work):
<input type="text" name="field" autocomplete="nope">
Explanation:
autocomplete still works on an <input>despite having autocomplete="off", but you can change off to a random string, like nope.
Others "solutions" for disabling the autocomplete of a field (it's not the right way to do it, but it works):
1.
HTML:
<input type="password" id="some_id" autocomplete="new-password">
JS (onload):
(function() {
var some_id = document.getElementById('some_id');
some_id.type = 'text';
some_id.removeAttribute('autocomplete');
})();
or using jQuery:
$(document).ready(function() {
var some_id = $('#some_id');
some_id.prop('type', 'text');
some_id.removeAttr('autocomplete');
});
2.
HTML:
<form id="form"></form>
JS (onload):
(function() {
var input = document.createElement('INPUT');
input.type = 'text';
document.getElementById('form').appendChild(input);
})();
or using jQuery:
$(document).ready(function() {
$('<input>', {
type: 'text'
}).appendTo($('#form'));
});
To add more than one field using jQuery:
function addField(label) {
var div = $('<div>');
var input = $('<input>', {
type: 'text'
});
if(label) {
var label = $('<label>', {
text: label
});
label.append(input);
div.append(label);
} else {
div.append(input);
}
div.appendTo($('#form'));
}
$(document).ready(function() {
addField();
addField('Field 1: ');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="form"></form>
Works in:
Chrome: 49+
Firefox: 44+
UPDATE
It seems now Chrome ignores the style="display: none;" or style="visibility: hidden; attributes.
You can change it to something like:
<input style="opacity: 0;position: absolute;">
<input type="password" style="opacity: 0;position: absolute;">
In my experience, Chrome only autocompletes the first <input type="password"> and the previous <input>. So I've added:
<input style="display:none">
<input type="password" style="display:none">
To the top of the <form> and the case was resolved.
It appears that Chrome now ignores autocomplete="off" unless it is on the <form autocomplete="off"> tag.
2021 UPDATE:Change <input type="text"> to <input type="search" autocomplete="off" >
That is all. Keeping the below answer around for nostalgia.
For a reliable workaround, you can add this code to your layout page:
<div style="display: none;">
<input type="text" id="PreventChromeAutocomplete"
name="PreventChromeAutocomplete" autocomplete="address-level4" />
</div>
Chrome respects autocomplete=off only when there is at least one other input element in the form with any other autocomplete value.
This will not work with password fields--those are handled very differently in Chrome. See https://code.google.com/p/chromium/issues/detail?id=468153 for more details.
UPDATE: Bug closed as "Won't Fix" by Chromium Team March 11, 2016. See last comment in my originally filed bug report, for full explanation. TL;DR: use semantic autocomplete attributes such as autocomplete="new-street-address" to avoid Chrome performing autofill.
Modern Approach
Simply make your input readonly, and on focus, remove it. This is a very simple approach and browsers will not populate readonly inputs. Therefore, this method is accepted and will never be overwritten by future browser updates.
<input type="text" onfocus="this.removeAttribute('readonly');" readonly />
The next part is optional. Style your input accordingly so that it does not look like a readonly input.
input[readonly] {
cursor: text;
background-color: #fff;
}
WORKING EXAMPLE
Well, a little late to the party, but it seems that there is a bit of misunderstanding about how autocomplete should and shouldn't work. According to the HTML specifications, the user agent (in this case Chrome) can override autocomplete:
https://www.w3.org/TR/html5/forms.html#autofilling-form-controls:-the-autocomplete-attribute
A user agent may allow the user to override an element's autofill field name, e.g. to change it from "off" to "on" to allow values to be remembered and prefilled despite the page author's objections, or to always "off", never remembering values. However, user agents should not allow users to trivially override the autofill field name from "off" to "on" or other values, as there are significant security implications for the user if all values are always remembered, regardless of the site's preferences.
So in the case of Chrome, the developers have essentially said "we will leave this to the user to decide in their preferences whether they want autocomplete to work or not. If you don't want it, don't enable it in your browser".
However, it appears that this is a little over-zealous on their part for my liking, but it is the way it is. The specification also discusses the potential security implications of such a move:
The "off" keyword indicates either that the control's input data is particularly sensitive (for example the activation code for a nuclear weapon); or that it is a value that will never be reused (for example a one-time-key for a bank login) and the user will therefore have to explicitly enter the data each time, instead of being able to rely on the UA to prefill the value for him; or that the document provides its own autocomplete mechanism and does not want the user agent to provide autocompletion values.
So after experiencing the same frustration as everyone else, I found a solution that works for me. It is similar in vein to the autocomplete="false" answers.
A Mozilla article speaks to exactly this problem:
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
In some case, the browser will keep suggesting autocompletion values even if the autocomplete attribute is set to off. This unexpected behavior can be quite puzzling for developers. The trick to really force the no-completion is to assign a random string to the attribute
So the following code should work:
autocomplete="nope"
And so should each of the following:
autocomplete="false"
autocomplete="foo"
autocomplete="bar"
The issue I see is that the browser agent might be smart enough to learn the autocomplete attribute and apply it next time it sees the form. If it does do this, the only way I can see to still get around the problem would be to dynamically change the autocomplete attribute value when the page is generated.
One point worth mentioning is that many browser will ignore autocomplete settings for login fields (username and password). As the Mozilla article states:
For this reason, many modern browsers do not support autocomplete="off" for login fields.
If a site sets autocomplete="off" for a form, and the form includes username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits this page.
If a site sets autocomplete="off" for username and password input fields, then the browser will still offer to remember this login, and if the user agrees, the browser will autofill those fields the next time the user visits this page.
This is the behavior in Firefox (since version 38), Google Chrome (since 34), and Internet Explorer (since version 11).
Finally a little info on whether the attribute belongs on the form element or the input element. The spec again has the answer:
If the autocomplete attribute is omitted, the default value corresponding to the state of the element's form owner's autocomplete attribute is used instead (either "on" or "off"). If there is no form owner, then the value "on" is used.
So. Putting it on the form should apply to all input fields. Putting it on an individual element should apply to just that element (even if there isn't one on the form). If autocomplete isn't set at all, it defaults to on.
Summary
To disable autocomplete on the whole form:
<form autocomplete="off" ...>
Or if you dynamically need to do it:
<form autocomplete="random-string" ...>
To disable autocomplete on an individual element (regardless of the form setting being present or not)
<input autocomplete="off" ...>
Or if you dynamically need to do it:
<input autocomplete="random-string" ...>
And remember that certain user agents can override even your hardest fought attempts to disable autocomplete.
TL;DR: Tell Chrome that this is a new password input and it won't provide old ones as autocomplete suggestions:
<input type="password" name="password" autocomplete="new-password">
autocomplete="off" doesn't work due to a design decision - lots of research shows that users have much longer and harder to hack passwords if they can store them in a browser or password manager.
The specification for autocomplete has changed, and now supports various values to make login forms easy to auto complete:
<!-- Auto fills with the username for the site, even though it's email format -->
<input type="email" name="email" autocomplete="username">
<!-- current-password will populate for the matched username input -->
<input type="password" autocomplete="current-password" />
If you don't provide these Chrome still tries to guess, and when it does it ignores autocomplete="off".
The solution is that autocomplete values also exist for password reset forms:
<label>Enter your old password:
<input type="password" autocomplete="current-password" name="pass-old" />
</label>
<label>Enter your new password:
<input type="password" autocomplete="new-password" name="pass-new" />
</label>
<label>Please repeat it to be sure:
<input type="password" autocomplete="new-password" name="pass-repeat" />
</label>
You can use this autocomplete="new-password" flag to tell Chrome not to guess the password, even if it has one stored for this site.
Chrome can also manage passwords for sites directly using the credentials API, which is a standard and will probably have universal support eventually.
Always working solution
I've solved the endless fight with Google Chrome with the use of random characters. When you always render autocomplete with random string, it will never remember anything.
<input name="name" type="text" autocomplete="rutjfkde">
Hope that it will help to other people.
Update 2022:
Chrome made this improvement: autocomplete="new-password" which will solve it but I am not sure, if Chrome change it again to different functionality after some time.
The solution at present is to use type="search". Google doesn't apply autofill to inputs with a type of search.
See: https://twitter.com/Paul_Kinlan/status/596613148985171968
Update 04/04/2016: Looks like this is fixed! See http://codereview.chromium.org/1473733008
Browser does not care about autocomplete=off auto or even fills credentials to wrong text field?
I fixed it by setting the password field to read-only and activate it, when user clicks into it or uses tab-key to this field.
fix browser autofill in: readonly and set writeble on focus (at mouse click and tabbing through fields)
<input type="password" readonly
onfocus="$(this).removeAttr('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
By the way, more information on my observation:
Sometimes I notice this strange behavior on Chrome and Safari, when there are password fields in the same form. I guess, the browser looks for a password field to insert your saved credentials. Then it autofills username into the nearest textlike-input field , that appears prior the password field in DOM (just guessing due to observation). As the browser is the last instance and you can not control it, sometimes even autocomplete=off would not prevent to fill in credentials into wrong fields, but not user or nickname field.
Chrome version 34 now ignores the autocomplete=off,
see this.
Lots of discussion on whether this is a good thing or a bad thing? Whats your views?
You can use autocomplete="new-password"
<input type="email" name="email">
<input type="password" name="password" autocomplete="new-password">
Works in:
Chrome: 53, 54, 55
Firefox: 48, 49, 50
[Works in 2021 for Chrome(v88, 89, 90), Firefox, Brave, Safari]
The old answers already written here will work with trial and error, but most of
them don't link to any official doc or what Chrome has to say on this
matter.
The issue mentioned in the question is because of Chrome's autofill feature, and here is Chrome's stance on it in this bug link - https://bugs.chromium.org/p/chromium/issues/detail?id=468153#c164
To put it simply, there are two cases -
[CASE 1]: Your input type is something other than password. In this case, the solution is simple, and has three steps.
Add name attribute to input
name should not start with a value like email or username, otherwise Chrome still ends up showing the dropdown. For example, name="emailToDelete" shows the dropdown, but name="to-delete-email" doesn't. Same applies for autocomplete attribute.
Add autocomplete attribute, and add a value which is meaningful for you, like new-field-name
It will look like this, and you won't see the autofill for this input again for the rest of your life -
<input type="text/number/something-other-than-password" name="x-field-1" autocomplete="new-field-1" />
[CASE 2]: input type is password
Well, in this case, irrespective of your trials, Chrome will show you the dropdown to manage passwords / use an already existing password. Firefox will also do something similar, and same will be the case with all other major browsers. [1]
In this case, if you really want to stop the user from seeing the dropdown to manage passwords / see a securely generated password, you will have to play around with JS to switch input type, as mentioned in the other answers of this question.
[1] A detailed MDN doc on turning off autocompletion - https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
Autocomplete="Off" doesn't work anymore.
Try using just a random string instead of "Off", for example Autocomplete="NoAutocomplete"
I hope it helps.
I am posting this answer to bring an updated solution to this problem.
I am currently using Chrome 49 and no given answer work for this one.
I am also looking for a solution working with other browsers and previous versions.
Put this code on the beginning of your form
<div style="display: none;">
<input type="text" autocomplete="new-password">
<input type="password" autocomplete="new-password">
</div>
Then, for your real password field, use
<input type="password" name="password" autocomplete="new-password">
Comment this answer if this is no longer working or if you get an issue with another browser or version.
Approved on:
Chrome : 49
Firefox : 44, 45
Edge : 25
Internet Explorer : 11
Seen chrome ignore the autocomplete="off", I solve it with a stupid way which is using "fake input" to cheat chrome to fill it up instead of filling the "real" one.
Example:
<input type="text" name="username" style="display:none" value="fake input" />
<input type="text" name="username" value="real input"/>
Chrome will fill up the "fake input", and when submit, server will take the "real input" value.
No clue why this worked in my case, but on chrome I used autocomplete="none" and Chrome stopped suggesting addresses for my text field.
Writing a 2020+ answer in case if this helps anyone. I tried many combinations above, though there is one key that was missed in my case. Even though I had kept autocomplete="nope" a random string, it didn't work for me because I had name attribute missing!
so I kept name='password'
and autocomplete = "new-password"
for username, I kept name="usrid" // DONT KEEP STRING THAT CONTAINS 'user'
and autocomplete = "new-password" // Same for it as well, so google stops suggesting password (manage password dropdown)
this worked very well for me.
(I did this for Android and iOS web view that Cordova/ionic uses)
<ion-input [type]="passwordType" name="password" class="input-form-placeholder" formControlName="model_password"
autocomplete="new-password" [clearInput]="showClearInputIconForPassword">
</ion-input>
autocomplete="off" is usually working, but not always. It depends on the name of the input field. Names like "address", 'email', 'name' - will be autocompleted (browsers think they help users), when fields like "code", "pin" - will not be autocompleted (if autocomplete="off" is set)
My problems was - autocomplete was messing with google address helper
I fixed it by renaming it
from
<input type="text" name="address" autocomplete="off">
to
<input type="text" name="the_address" autocomplete="off">
Tested in chrome 71.
Some end 2020 Update. I tried all the old solutions from different sites. None of them worked! :-(
Then I found this:
Use
<input type="search"/>
and the autocomplete is gone!
Success with Chrome 86, FireFox, Edge 87.
autocomplete=off is largely ignored in modern browsers - primarily due to password managers etc.
You can try adding this autocomplete="new-password" it's not fully supported by all browsers, but it works on some
to anyone looking for a solution to this, I finally figure it out.
Chrome only obey's the autocomplete="off" if the page is a HTML5 page (I was using XHTML).
I converted my page to HTML5 and the problem went away (facepalm).
Change input type attribute to type="search".
Google doesn't apply auto-fill to inputs with a type of search.
Up until just this last week, the two solutions below appeared to work for Chrome, IE and Firefox. But with the release of Chrome version 48 (and still in 49), they no longer work:
The following at the top of the form:
<input style="display:none" type="text" name="fakeUsername"/>
<input style="display:none" type="password" name="fakePassword"/>
The following in the password input element:
autocomplete="off"
So to quickly fix this, at first I tried to use a major hack of initially setting the password input element to disabled and then used a setTimeout in the document ready function to enable it again.
setTimeout(function(){$('#PasswordData').prop('disabled', false);}, 50);
But this seemed so crazy and I did some more searching and found #tibalts answer in Disabling Chrome Autofill. His answer is to use autocomplete="new-password" in the passwords input and this appears to work on all browsers (I have kept my fix number 1 above at this stage).
Here is the link in the Google Chrome developer discussion:
https://code.google.com/p/chromium/issues/detail?id=370363#c7
After the chrome v. 34, setting autocomplete="off" at <form> tag doesn`t work
I made the changes to avoid this annoying behavior:
Remove the name and the id of the password input
Put a class in the input (ex.: passwordInput )
(So far, Chrome wont put the saved password on the input, but the form is now broken)
Finally, to make the form work, put this code to run when the user click the submit button, or whenever you want to trigger the form submittion:
var sI = $(".passwordInput")[0];
$(sI).attr("id", "password");
$(sI).attr("name", "password");
In my case, I used to hav id="password" name="password" in the password input, so I put them back before trigger the submition.
I had a similar issue where the input field took either a name or an email. I set autocomplete="off" but Chrome still forced suggestions. Turns out it was because the placeholder text had the words "name" and "email" in it.
For example
<input type="text" placeholder="name or email" autocomplete="off" />
I got around it by putting a zero width space into the words in the placeholder. No more Chrome autocomplete.
<input type="text" placeholder="nam​e or emai​l" autocomplete="off" />
Instead of autocomplete="off" use autocomplete="false" ;)
from: https://stackoverflow.com/a/29582380/75799
In Chrome 48+ use this solution:
Put fake fields before real fields:
<form autocomplete="off">
<input name="fake_email" class="visually-hidden" type="text">
<input name="fake_password" class="visually-hidden" type="password">
<input autocomplete="off" name="email" type="text">
<input autocomplete="off" name="password" type="password">
</form>
Hide fake fields:
.visually-hidden {
margin: -1px;
padding: 0;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
clip: rect(0, 0, 0, 0);
position: absolute;
}
You did it!
Also this will work for older versions.
I managed to disable autocomple exploiting this rule:
Fields that are not passwords, but should be obscured, such as credit
card numbers, may also have a type="password" attribute, but should
contain the relevant autocomplete attribute, such as "cc-number" or
"cc-csc".
https://www.chromium.org/developers/design-documents/create-amazing-password-forms
<input id="haxed" type="password" autocomplete="cc-number">
However it comes with the great responsibility :)
Don’t try to fool the browser Password managers (either built into the
browser, or external) are designed to ease the user experience.
Inserting fake fields, using incorrect autocomplete attributes or
taking advantage of the weaknesses of the existing password managers
simply leads to frustrated users.
Update 08/2022:
I managed to get autocomplete to be respected by including
autocomplete="new-password"
on each individual input element regardless of type.
E.g.
<input id="email" type="email" autocomplete="new-password"/>