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+
new-password is a good catch for any hidden input that's actually is not a password, thanks –
Busily autocomplete="nope" actually worked for me, unless I add it to both my form fields. Like I can have it on either field and then that field won't autocomplete, but the other field will still autocomplete, but soon as I put it on both fields, both of them starts autocompleting again. –
Eudoxia autocomplete="UwzM6". –
Horn autocomplete="stopchrome" to give other developers a hint about why it has been set in this way. –
Sofer 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.
display: none; will disappear the element, nothing about the autocomplete. –
Reynoso It appears that Chrome now ignores autocomplete="off" unless it is on the <form autocomplete="off"> tag.
autocomplete="new-password" on individual fields –
Bad 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.
id of the input or fill it with id = lastNumber+1 to keep it unique. Tip 2: this bug is not Chrome bug but Chromium bug and it's the same in multiple browsers based on Chromium. Vivaldi for example. –
Kingbolt autocomplete="off" attribute or the type="search" won't do the trick. Thanks! for finding the trick. –
Basswood autocomplete="off" to autocomplete="something-else" should do the trick. –
Monoplegia 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;
}
modern approach. Less than 1% of users in the world have Javascript turned off. So honestly, it's not worth anyones time accommodating for such a small audience when a large majority of websites rely on Javascript. Been developing websites for a very long time now, and 100% of my sites use Javascript and rely on it heavily. If users have Javascript turned off, that's their own problem and choice, not mine. They'll be unable to visit or use at least 90% of websites online with it turned off... Your downvote is completely irrelevant. –
Herlindaherm mandatory. E.g. a password field using this code cannot be forced to be filled before submitting. –
Metalline click for addEventListener() because focus would still show the autocomplete –
Downy 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.
autocomplete="new-password" was only ever a hack - it was the best workaround in 2017, but as I said in the original post (rightly or wrongly) the Chrome team want to make passwords auto-completable. type="password" tells the browser to treat this as a password - if you want to have an obscured input that shouldn't be treated as passwords (i.e. not found by password managers) then yeah, the only reliable way to do it will be to roll your own. –
Contamination 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:
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.
new-password –
Sanitation select tag which implies that it was not a password field they were having problems with (although it could have been a problem field too). Moreover, new-password is a hint in the spec, and browsers may or may not follow it for password fields only. So don't be surprised if new-password doesn't always work for password fields in every case. –
Sallie 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:
[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.
name attribute to inputname 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.autocomplete attribute, and add a value which is meaningful for you, like new-field-nameIt 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
[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
<input name="portal_user" type="text" maxlength="64" autocomplete="portal">. Chrome insists on autofilling the WordPress admin username and password. –
Direful 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:
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.
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.
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>
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"/>
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).
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
Quick hack, Incase if you still getting the autocomplete even though reading above answers, you can try this. Giving random string will remove the autocomplete.
<input autocomplete="somerandomstring" or autocomplete="disabled">
Idk is it right way or not, It just worked for me.
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:
<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:
name and the id of the password inputpasswordInput )(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" ;)
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.
autocomplete="off" on the form tag. Also try to put fake inputs immediately after form tag. –
Celie 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.
Whilst I agree autocomplete should be a user choice, there are times when Chrome is over-zealous with it (other browsers may be too). For instance, a password field with a different name is still auto-filled with a saved password and the previous field populated with the username. This particularly sucks when the form is a user management form for a web app and you don't want autofill to populate it with your own credentials.
Chrome completely ignores autocomplete="off" now. Whilst the JS hacks may well work, I found a simple way which works at the time of writing:
Set the value of the password field to the control character 8 ("\x08" in PHP or  in HTML). This stops Chrome auto-filling the field because it has a value, but no actual value is entered because this is the backspace character.
Yes this is still a hack, but it works for me. YMMV.
form for creating new and editing existing users simply overriding input values via JS removed the auto-complete. –
Aphanite As of Chrome 42, none of the solutions/hacks in this thread (as of 2015-05-21T12:50:23+00:00) work for disabling autocomplete for an individual field or the entire form.
EDIT: I've found that you actually only need to insert one dummy email field into your form (you can hide it with display: none) before the other fields to prevent autocompleting. I presume that chrome stores some sort of form signature with each autocompleted field and including another email field corrupts this signature and prevents autocompleting.
<form action="/login" method="post">
<input type="email" name="fake_email" style="display:none" aria-hidden="true">
<input type="email" name="email">
<input type="password" name="password">
<input type="submit">
</form>
The good news is that since the "form signature" is corrupted by this, none of the fields are autocompleted, so no JS is needed to clear the fake fields before submission.
Old Answer:
The only thing I've found to be still viable is to insert two dummy fields of type email and password before the real fields. You can set them to display: none to hide them away (it isn't smart enough to ignore those fields):
<form action="/login" method="post">
<input type="email" name="fake_email" style="display:none" aria-hidden="true">
<input type="password" name="fake_password" style="display:none" aria-hidden="true">
<input type="email" name="email">
<input type="password" name="password">
<input type="submit">
</form>
Unfortunately, the fields must be within your form (otherwise both sets of inputs are autofilled). So, for the fake fields to be truly ignored you'll need some JS to run on form submit to clear them:
form.addEventListener('submit', function() {
form.elements['fake_email'].value = '';
form.elements['fake_password'].value = '';
});
Notice from above that clearing the value with Javascript works to override the autocomplete. So if loosing the proper behavior with JS disabled is acceptable, you can simplify all of this with a JS autocomplete "polyfill" for Chrome:
(function(document) {
function polyfillAutocomplete(nodes) {
for(var i = 0, length = nodes.length; i < length; i++) {
if(nodes[i].getAttribute('autocomplete') === 'off') {
nodes[i].value = '';
}
}
}
setTimeout(function() {
polyfillAutocomplete(document.getElementsByTagName('input'));
polyfillAutocomplete(document.getElementsByTagName('textarea'));
}, 1);
})(window.document);
I just updated to Chrome 49 and Diogo Cid's solution doesn't work anymore.
I made a different workaround hiding and removing the fields at run-time after the page is loaded.
Chrome now ignores the original workaround applying the credentials to the first displayed type="password" field and its previous type="text" field, so I have hidden both fields using CSS visibility: hidden;
<!-- HTML -->
<form>
<!-- Fake fields -->
<input class="chromeHack-autocomplete">
<input type="password" class="chromeHack-autocomplete">
<input type="text" placeholder="e-mail" autocomplete="off" />
<input type="password" placeholder="Password" autocomplete="off" />
</form>
<!-- CSS -->
.chromeHack-autocomplete {
height: 0px !important;
width: 0px !important;
opacity: 0 !important;
padding: 0 !important; margin: 0 !important;
}
<!--JavaScript (jQuery) -->
jQuery(window).load(function() {
$(".chromeHack-autocomplete").delay(100).hide(0, function() {
$(this).remove();
});
});
I know that it may seem not very elegant but it works.
Chrome keeps changing the way it handles autocomplete on each version, the way I came up was, to make the fields readonly and onclick/focus make it Not readonly. try this jQuery snippet.
jQuery(document).ready(function($){
//======fix for autocomplete
$('input, :input').attr('readonly',true);//readonly all inputs on page load, prevent autofilling on pageload
$('input, :input').on( 'click focus', function(){ //on input click
$('input, :input').attr('readonly',true);//make other fields readonly
$( this ).attr('readonly',false);//but make this field Not readonly
});
//======./fix for autocomplete
});
2021 answer: Sadly, the only things that work are disgustingly hacky. My solution is to add a dynamically generated random number to the end of the name attribute (E.g. <input name="postcode-22643"...) when generating your front-end markup. This tricks the browser suitably for now.
You'll then need to add something server-side to cleanse the incoming post request. For example, within NodeJS / Express, I've put a middleware in, with a bit of regex to remove the number segment from the received post request. Mine looks like this, but I imagine something pretty similar would be available in other languages:
const cleanseAutosuggest = function (req, res, next) {
for (const key in req.body) {
if (key.match(/-\d+/)) {
req.body[key.replace(/-\d+/, "")] = req.body[key];
delete req.body[key];
}
}
next();
};
app.post("/submit", cleanseAutosuggest, function (req, res, next) {
...
})
I have a VERY simple solution to this problem no code required and an acceptable solution. Chrome often reads the label of the input and does AutoComplete. You can simply insert an "empty" character into the label.
E.g. <label>Surname</labe>
Becomes: <label>Sur‍name</label>
is the HTML escape character for "Empty string".
This will still show "Surname" but the Autocomplete wont detect the field and try autocompleting it.
label={{children: <span>Cou‍ntry</span>}} –
Signory i found this solution to be the most appropriate:
function clearChromeAutocomplete()
{
// not possible, let's try:
if (navigator.userAgent.toLowerCase().indexOf('chrome') >= 0)
{
document.getElementById('adminForm').setAttribute('autocomplete', 'off');
setTimeout(function () {
document.getElementById('adminForm').setAttribute('autocomplete', 'on');
}, 1500);
}
}
It must be loaded after dom ready, or after the form renders.
I solved in another way. You can try this.
<input id="passfld" type="text" autocomplete="off" />
<script type="text/javascript">
// Using jQuery
$(function(){
setTimeout(function(){
$("input#passfld").attr("type","password");
},10);
});
// or in pure javascript
window.onload=function(){
setTimeout(function(){
document.getElementById('passfld').type = 'password';
},10);
}
</script>
After having tried all solutions, Here is what seems to be working for chrome version:45, with form having password field :
jQuery('document').ready(function(){
//For disabling Chrome Autocomplete
jQuery( ":text" ).attr('autocomplete','pre'+Math.random(0,100000000));
});
autocomplete="off" works now, so you can just do the following:
<input id="firstName2" name="firstName2" autocomplete="off">
Tested in the current Chrome 70 as well as in all versions starting from Chrome 62.
Demo:
input has the auto complete workinginput has the auto complete disabled by adding autocomplete="off"input has autocomplete="off", whereas the upper one doesn't. So, the auto completer is meant to be disabled for the bottom input only, but on your screen shot you're testing auto complete on the upper one. Thus, this still is the proper way of disabling the auto complete for Chrome 70. I'd appreciate if you check it out more thoroughly and upvote this one instead of downvoting. –
Israelitish For me setting autocomplete="off" in form and inputs worked. But can be flake. Some times it will suggest password or some saved login+password option. But don't come pre-filled.
Chrome Version: 81.0.4044.138
<form role="form" method="post" action="#" autocomplete="off">
<label for="login">Login</label><br/>
<input type="text" name="login" id="login" autocomplete="off" />
<br/><br/>
<label for="password">Password</label><br/>
<input type="password" name="password" autocomplete="off" />
<br/><br/>
<input type="submit" name="submit" value="Submit" />
</form>Others Options:
Usually I have to find another work around every few months...
After lot of digging I found that autocomplete dropdown on Chrome(Version 83.0.4103.116) doesn't shows up when we remove name and id attribute on input tag eg. code as below
<div>
<span>
Auto complete off works if name and id attribute is not set on input tag
<input type="text"/>
</span>
<span>
Auto complete will work here since id attribute is set
<input id="name" type="text"/>
</span>
</div>The only solution that worked and tested successfully on Chrome and Firefox is to wrap the input with a form that has autocomplete="off" as per below:
<form autocomplete="off">
<input id="xyz" />
</form>
The hidden input element trick still appears to work (Chrome 43) to prevent autofill, but one thing to keep in mind is that Chrome will attempt to autofill based on the placeholder tag. You need to match the hidden input element's placeholder to that of the input you're trying to disable.
In my case, I had a field with a placeholder text of 'City or Zip' which I was using with Google Place Autocomplete. It appeared that it was attempting to autofill as if it were part of an address form. The trick didn't work until I put the same placeholder on the hidden element as on the real input:
<input style="display:none;" type="text" placeholder="City or Zip" />
<input autocomplete="off" type="text" placeholder="City or Zip" />
Looks like this is fixed! See https://codereview.chromium.org/1473733008
When using a widget like jQuery UI's Autocomplete make sure to check that it is not adding/changing to autocomplete attribute to off. I found this to be true when using it and will break any work you may have done to override any browser field caching. Make certain that you have a unique name attribute and force a unique autocomplete attribute after the widget initializes. See below for some hints on how that might work for your situation.
<?php $autocomplete = 'off_'.time(); ?>
<script>
$('#email').autocomplete({
create: function( event, ui ) {
$(this).attr('autocomplete','<? echo $autocomplete; ?>');
},
source: function (request, response) { //your code here },
focus: function( event, ui ) { //your code here },
select: function( event, ui ) { //your code here },
});
</script>
<input type="email" id="email" name="email_<? echo $autocomplete; ?>" autocomplete="<? echo $autocomplete; ?>" />
MAR 2020
I'm facing this issue and unfortunately non of the solutions worked for me. So I applied the little hack which is working fine.
<input autocomplete="off" type="password" name="password" id="password" readonly="readonly">
$('#password').on('click', function (event) {
$('#password').removeAttr('readonly');
$('#password').focus();
});
$('#password').on('blur', function (event) {
$('#password').attr('readonly', 'readonly');
});
when you click on password input field it start to show suggestion but when trigger focus on input field than it does not show suggestions so that's how I solved my issue.
I hope it will help someone.
None of these methods work anymore, chrome ignores all of these attributes, the only solution is to use jquery
use this on input
<input onclick="$(this).removeAttr('readonly');" onblur="$(this).attr('readonly', true);" readonly />
It seems that the Chrome autocomplete event is triggered on DOMContentLoaded, and in the lastest version of Chrome (110.0.5481.178) now ignores autocomplete="nope" and autocomplete="new-password" or random attribute, so if you don't want to use the readonly trick or other JQuery and Js randomness things you can just set the inputs (email, password and tel mainly) to text and in the load event just re-set to the correct type, this should be at least 1ms after the load event because if it's done immediately it will be autocompleted by the browser, so just do this trick:
Set the input to type to "text" and store the real type on some attribute or class like whis:
<input type="text" id="infoEmail" placeholder="[email protected]" data-on-load-type="email">
Then, in the window load event use the setTimeout function and it's done, the input will have the right type and won't be autocomplete
window.addEventListener('load', ()=>{
document.querySelectorAll('input[data-on-load-type]').forEach(trickedInput=>{
trickedInput.setAttribute('type', trickedInput.getAttribute('data-on-load-type'))
});
});
Edit: just want to add more info about how the autocomplete seems to work.
The autocomplete happens most of the time when are a password and at least other input element in the DOM, the browser will treat everything posssible as a autocompletable, even if theese aren't in a <form> tag or has the autocomplete atribute to nope or new-password, so if a password input is found and any other autocompletable input such as email, tel or adress thoose will be autocomplete, but not if they have a display: none; so the browser will try to fill anyways any other input element visible, even if is not related to a contact or login form, like a input search on a search bar, and if you have a script to display the inputs sometimes they will be autocompleted if an input password is on the DOM, so this is a big problem and browsers should respect when something shouldn't be autocomplete.
So, once the browser knows that there's a input password on the DOM it seems to attach a listenner to autocomplete inputs when they change their display, so i found this solution by setting the type to text, and then changing it to the correct type with a little delay after the load event, it seems to work pretty well, for now.
To prevent autocomplete, just set an empty space as the input value:
<input type="text" name="name" value=" ">
Here is what worked for me on Chrome Version 51.0.2704.106.<input id="user_name" type="text" name="user_name" autocomplete="off" required />
and in combination with <input id="user_password" type="password" name="user_password" autocomplete="new-password" required />. My problem was that after implementing new-password it would still show a drop-down of usernames on the user_name field.
You can use the below concept to implement AutoComplete='false' for chrome as well as other browsers. Take a dummy input type which will be hidden with opacity 0. by default chrome browser have triggered the first one which already hidden.
<input style="opacity: 0; position: absolute; z-index: -1;" name="email">
<input type="search" name="email" class="form-control" autocomplete="new-email" id="email">
I've just tried the following, and it appears to do the trick on Chrome 53 - it also disables the "Use password for:" drop down when entering the password field.
Simply set your password input type to text, and then add the onfocus handler (inline or via jQuery/vanilla JS) to set the type to password:
onfocus="this.setAttribute('type','password')"
Or even better:
onfocus="if(this.getAttribute('type')==='text') this.setAttribute('type','password')"
Add this right after form tag:
<form>
<div class="div-form">
<input type="text">
<input type="password" >
</div>
Add this to your css file:
.div-form{
opacity: 0;
}
I'am using Chrome - Version 64.0.3282.140 (Official Build) (64-bit) and used following code along with form name and it works for me.
<form name="formNameHere">....</form>
<script type="text/javascript">
setTimeout(function(){
document.formNameHere.reset();
},500);
</script>
None of the solutions worked except for giving it a fake field to autocomplete. I made a React component to address this issue.
import React from 'react'
// Google Chrome stubbornly refuses to respect the autocomplete="off" HTML attribute so
// we have to give it a "fake" field for it to autocomplete that never gets "used".
const DontBeEvil = () => (
<div style={{ display: 'none' }}>
<input type="text" name="username" />
<input type="password" name="password" />
</div>
)
export default DontBeEvil
I call this the sledgehammer approach, but it seems to work for me where all other approaches I tried have failed:
<input autocomplete="off" data-autocomplete-ninja="true" name="fa" id="fa" />
Note: the input name and id attributes should not contain anything that would give the browser a hint as to what the data is, or this solution will not work. For instance, I'm using "fa" instead of "FullAddress".
And the following script on page load (this script uses JQuery):
$("[data-autocomplete-ninja]").each(function () {
$(this).focus(function () {
$(this).data("ninja-name", $(this).attr("name")).attr("name", "");
}).blur(function () {
$(this).attr("name", $(this).data("ninja-name"));
});
});
The above solution should prevent the browser from autofilling data gathered from other forms, or from previous submits on the same form.
Basically, I'm removing the name attribute while the input is in focus. As long as you're not doing anything requiring the name attribute while the element is in focus, such as using selectors by element name, this solution should be innocuous.
For this problem I have used this css solution. It is working for me.
input{
text-security:disc !important;
-webkit-text-security:disc !important;
-moz-text-security:disc !important;
}
I had the similar issue with one of the search field in my form. neither autocomplete= "false" nor autocomplete= "off" worked for me. turns out when you have aria-label attribute in the input element is set to something like city or address or something similar , chrome overrides all your settings and display the autocomplete anyway
So fix i have done is to remove the city part from the aria-label and come up with a different value. and finally autocomplete stopped showing
I have a nearly perfect solution for this issue: Remove "type=password" from all password input elements,after all of them were loaded into DOM,give a timeout to set the "type=password" back.Chrome will ignore the changed type for auto filling.Example:
setTimeout(()=>{ele.type="password"},3000)
Or change the type by event:
ele.oninput=function(){ele.type="password"}
I've found another solution - just mask the characters in your autocomplete="off" inputs with style="-webkit-text-security: disc;".
You can also add it to your CSS rules in something like following way:
[autocomplete="off"] {
-webkit-text-security: disc;
}
The main goal is to elminate the type="password" or other simillar type attribute from the element.
At least, for the moment of 2021-01-24 this solution works...
Basically we can get rid of the autocomplete from any textbox from chrome, firefox or any kind of browsers. It's simple javascript.
window.onload=function(){
setTimeout(function(){
document.getElementById('username').value = '';
document.getElementById('password').value = '';
},100);
}
When your window is finish loading, after 100 milliseconds our username and password fields value going to delete. I think it is the best way to do autocomplete off on all browsers (Specially for chrome).
2021 September Answer
As I had to deal with this issue the only stable working solution was to generate a random string for name and autocomplete attribute in the <input> elements each time when the website is rendered.
A simple demo for this using pure JavaScript is below.
Html:
<div>
<h3>Autofill disabled with random string</h3>
<form id="disable-autofill-form">
<div>
<span>First Name</span>
<input type="text" />
</div>
<div>
<span>Last Name</span>
<input type="text" />
</div>
<div>
<span>City</span>
<input type="text" />
</div>
<div>
<span>Street</span>
<input type="text" />
</div>
<div>
<span>Postal Code</span>
<input type="text" />
</div>
</form>
</div>
JavaScript:
const randomString = (Math.random() + 1).toString(36).substring(5);
const disableAutoFillForm = document.getElementById('disable-autofill-form');
const disableAutoFillFormInputs = [
...disableAutoFillForm.getElementsByTagName('input'),
];
disableAutoFillFormInputs.forEach((input) => {
input.setAttribute('autocomplete', randomString);
input.setAttribute('name', randomString);
});
A Stackblitz project to play around with it can be found here.
I just find a trick:
<input type="password" id="some_id" name="some_name" value=" " placeholder="Password">
<script>
$(function)
{
$("#some_id").val("");
}
</script>
note that value is blank space. It prevents autompiling in Chrome and input field shows placeholder.
I ran into this problem lately and non of the answers worked for me. In my case, as I didn't care for the input field to be nested inside a "form" tag, I fixed chrome autocomplete problem by providing an empty datalist to the input. So now chrome should provide you with autocomplete suggestions from the "datalist" which is empty. Have in mind that this solution does not work if the input is nested in a "form" tag. Surprisingly nothing else worked for me but this trick.
<input type="text" autocomplete="off" list="emptyList" />
<datalist id="emptyList"></datalist>
You can learn more about data lists here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist
Considering browser compatibility, it seems to be safe to use.
2024
Using Jquery:
'use strict';
$(document).ready(function(){
var inputs = $('input.autocomplete_off');
inputs.each(function() {
$(this).attr('readonly');
});
});
'use strict';
$(document).ready(function(){
$('.autocomplete_off').on('click', function(){
$(this).removeAttr('readonly')
})
});
How to use?
<input class="autocomplete_off"></input>
I had to adress this issue on a drupal page with a huge webform. Because I can not edit the html code of every input, I came up with the following generic jQuery solution.
<script>
// Form Autocomplete FIX
function is_mobile() {
if( screen.width < 500 || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) ) {
return true;
}
return false;
}
jQuery( 'input[autocomplete="off"]' ).each( function() {
if( is_mobile() ) {
return;
}
jQuery( this ).attr( 'readonly', true );
} );
jQuery( 'input[autocomplete="off"]' ).focus( function() {
if( is_mobile() ) {
return;
}
jQuery( this ).removeAttr( 'readonly' );
jQuery( this ).focus();
} );
jQuery( 'input[autocomplete="off"]' ).blur( function() {
if( is_mobile() ) {
return;
}
jQuery( this ).attr( 'readonly', true );
} );
</script>
Browser detection from here.
I guess there is a possibility to optimize this code (I'd love to get some advice), but you'll get the idea from it.
I found a solution that works for me. It doesn't disable autocomplete but allows to customize it. Tested in Chrome 96, Opera 82
/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
border: none;
border-bottom: 1px solid;
-webkit-text-fill-color: #000;
-webkit-box-shadow: 0 0 0 1000px transparent inset;
}
I've came up with the following solution that queries all fields with the attribute autocomple="off" then set it's value to a single space then set a timer for around 200ms and set the value back to an empty string.
Example:
// hack to prevent auto fill on chrome
var noFill = document.querySelectorAll("input[autocomplete=off]");
noFill.forEach(function(el) {
el.setAttribute("value", " ");
setTimeout(function() {
el.setAttribute("value", "");
}, 200);
});
I choose 200ms for the timer because after some experimentation 200ms seems to be the amount of time it takes on my computer for chrome to give up on trying to autocomplete the fields. I'm welcome to hear what other times seem to work better for other people.
© 2022 - 2024 — McMap. All rights reserved.