I always thought that setting type="tel" on an <input> is enough for autocomplete. Turn out not true:
Open MDN's <input type="tel"> page, look at the example. If I remove both name="phone" and id="phone", autocomplete does not work. If I remove either of them, autocomplete still works.
I think it could be considered invalid, then I add both of them, but use a different value, not phone. Autocomplete still does not work.
So maybe Chrome "guesses" what to fill bases on the name/id. My question is why they do that. Why doesn't it fill for type="tel" alone?
I use latest Chrome.
Lately, we have added a custom React components library to our app (company standart). It has a limitation - doesn't allow to set name or autocomplete attribute. So, some of our inputs lost name attribute after an update.
After update our rendered input looks like this:
<div class="search-input">
<div class="sc-bYwzuL dnjiBM">
<input data-test-id="navigation_customer-search-input" placeholder="Search for a customer" rows="1" value="">
</div>
</div>
And Chrome started to autofill it with credit cards info:
Maybe someone is aware of what can cause such behavior?
I was sure that credit cards autofill is only available when correct name or autocomplete attributes are provided (like described here).
Additional details:
Before the library update input had no issue with autocomplete and was rendered like this:
<div class="search-input-container">
<input type="text" name="search" placeholder="Search for a customer" data-test-id="search__search-input__input" value="">
</div>
Also, when I'm deploying exactly the same version to a different environment with a different domain (which I wasn't using for a while) - I don't see an autofill issue.
According to this thread Chrome uses crowdsourcing (when many people entered the first name into the field - Chrome will classify it as a first name) to identify how to autocomplete the field.
However, if your input has the correct name and/or autocomplete attribute - it will work accordingly to that attributes.
After applying this fix and testing I can say, that it was probably the only way to fix the issue.
I have an input tag which acts as a search box. But before that I have two input tags through which the credentials is given which gets saved in chrome browser. Now when the search box gets rendered it gets rendered with the autofill value of the username which was saved in the browser previously. My requirement is the autofill for the search input tag should not take place. I had used the following attributes for the search input tag but still it is not getting resolved.
<input type="text" spellcheck="false" autocomplete="off" name="my_custom_name">
Can anyone please provide me with a solution?
The latest way to do this is,Just simply use type search
<input type="search" />
autocomplete="off" toggles the application auto complete. Chrome browser has "Auto-fill" feature, where users can enable/disable. Hope you are not talking about this.
This question already has answers here:
Disabling Chrome Autofill
(68 answers)
Closed 4 years ago.
I just updated my browser to Chrome Version 63.0.3239.84 (Official Build) (64-bit).
I then proceeded to go on my website, where I have a input box with autocomplete='off', yet I still get the following:
(You can see my inbuilt suggestion dropdown below it)
This never used to be the case. Nothing else has changed!
Why is this happening? Is this a bug in the new version of chrome? I have tried all other suggestions like autocomplete="false" or applying autocomplete=off to the form too. I have even tried to apply these with jquery after the page has loaded but also no luck.
I have tested this on multiple machines with the newest version of chrome on different operating systems. The issue persists.
Update Apr 2021:
Chrome and Firefox support autocomplete="off"
Safari continues to ignore autocomplete="off" and as far as I know there's no good solution fore Safari except to obfuscate the field name.
Update Feb 2018:
Thanks to #JamesNisbet for pointing this out in the comments.
According to the Chrome team, autocomplete="off" and autocomplete="false" will be ignored moving forward. This is not a temporary regression in Chrome.
Chrome will attempt to autofill any form fields that follow the WHATWG standard on autocomplete. With one exception, they ignore "off" and "false" values.
In summary, to disable autofill, use the autocomplete attribute with a value that is not on the WHATWG list.
Make your case why you think autocomplete="off" should not be ignored by Chrome in this Chromium thread.
Looks like a possible regression in Chrome 63. In Chrome's original autofill documentation:
In the past, many developers would add autocomplete="off" to their form fields to prevent the browser from performing any kind of autocomplete functionality. While Chrome will still respect this tag for autocomplete data, it will not respect it for autofill data. So when should you use autocomplete="off"? One example is when you've implemented your own version of autocomplete for search.
https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
They do make a distinction between autocomplete and autofill, although it's not clear they are different.
Chrome, Safari, and Edge are all attempting to implement autofill but there is no clear standard. They look at the name attribute rather than an explicit, standardized attribute.
For now autocomplete="something-new" is a good workaround, although syntactically it makes no sense. This seems to work because the browser can't understand it.
We tried autocomplete="false" and autocomplete="off", neither work. But something Chrome doesn't understand, like autocomplete="disabled", does seem to work. Strange!
Update: this is working as of Chrome 72.
2019 It seems autocomplete="disabled" works again as of Chrome 72.
SINCE A LOT OF PEOPLE HAVE BEEN DOWNVOTING WITHOUT READING THE COMMENTS:
THIS NO LONGER WORKS IN CHROME AS OF 2018 / CHROME 63+
relevant: https://bugs.chromium.org/p/chromium/issues/detail?id=587466
Having autocomplete="false" instead of autocomplete="off" works, you can read more from the Chrome team as to why they did it
here:
https://www.chromium.org/developers/design-documents/form-styles-that-chromium-understands
https://bugs.chromium.org/p/chromium/issues/detail?id=468153
https://groups.google.com/a/chromium.org/forum/#!topic/chromium-dev/zhhj7hCip5c
https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
Looks like chrome looks for the closest "label" html tag to the input, and analyzes the label's value/html to affect the input's autofill.
The cleanest workaround I found to disable the input's autofill was this:
<label for="">Country</label>
<label for="" style="display: none;">hidden label to mislead chrome autocomplete</label>
<input ... />
I've managed to get a working "hack" in Chrome Version 65.0.3325.162 (Official Build) (64-bit).
I have to render an input field - hidden so it doesn't affect my page:
<input style="display:none;"/>
Then I render my password input field:
<input type="password" autocomplete="new-password" />
So my form ends up looking like:
<form>
<input style="display:none;" />
<input type="password" autocomplete="new-password" />
<input type="submit" />
</form>
Importantly, you cannot add a name or an id attribute to your password type input element, and you must have autocomplete="new-password"
After Chrome 63 it looks like they changed it to autocomplete="disabled"
I recommend you get a browser detecting library and for the rest of it use autocomplete="off"
As Chrome is never going to work properly and/or keeps changing its mind (I know its not human) the simplest solution to ensure autofill/autocomplete stops is to do the following on any inputs you dont want autofilled:
<input type='text' readonly onfocus="this.removeAttribute('readonly');" value=''/>
For Angular users, Since the autocomplete = 'off' ignore by new chrome versions, chrome developer suggests autocomplete= 'false | random-string', so the google chrome/modern browsers have 2 type of users helpers -
autocomplete='off' (which prevents last cached suggestions).
autocomplete = 'false | random-string' (which prevents autofill setting, since the 'random-string' is not known by the browser).
so what to do, in case of disabling both the annoying suggestions? Here is the trick:-
add autocomplete = 'off' in every input fields. (or simple Jquery).
$("input").attr('autocomplete', 'off');
Remove the <form name='form-name'> tag from HTML code and add ng-form = 'form-name' in your <div> container. adding ng-form="form-name" will also retain all your validations.
I feel terrible how different browsers use different options in a same functionality.
If it's chrome, use autocomplete="disabled" which handles both autocomplete and address based autofill (two separate things):
element.autocomplete = isGoogleChrome() ? 'disabled' : 'off';
You can get some insight on how to writ isGoogleChrome() from here
JavaScript: How to find out if the user browser is Chrome?
Current working solution using JQuery:
Removed name and id from the input I don't want autofill on and added an identifying class. I then created a hidden input with the field name and id I want. Then on form submit I copy the value from the field with no id and no name (finding it by my identifying class), into the hidden field with the name and id.
HTML
<form id="myform">
<input class="identifyingclass" value="">
<input class="hidden" id="city" name="city" value="">
<button type="submit">Submit</button>
</form>
Javascript
$('#myform').on('submit', function(e) {
$("#city").val($('.identifyingclass').val());
});
I reckon this should work as I don't see autofill latching on to anything other than an id or name.
Every answer I could find did not work for me. The most irritating part about my situation was how Android populated the notes field with a login name, resulting in erroneous notes being entered into the database.
I thought about how typing into the text input clears the Android autofill and the below trick worked. Note that simply clearing the value did not remove the autocomplete, I had to set the field's value. Immediately clearing the value after setting a value also did not work. The delay is needed for Android chrome to see a change and remove the filled in value.
Bonus: doing this action on the notes field caused Android to empty the other autocompleted elements in my form.
<script src="/js/jquery-1.12.1.min.js"></script>
<script>
$(function () {
$('#notes').val('--');
setTimeout(
function(){ $('#notes').val(''); }
, 2000
);
});
</script>
<input type='text' id='notes' name='notes' maxlength='250' size='17'>
The function setTimeout( callback, msec ) is javascript, thus a programmer could implement this without using jQuery.
I fixed this on my site by replacing the offending input element with
<p class="input" contenteditable="true"> </p>
and using jQuery to populate a hidden field prior to submission.
But this is a truly awful hack made necessary by a bad decision at Chromium.
I usually do this to hide the autofill icon:
<div style="width: 0; overflow:hidden;">
<input type="text" />
</div>
As Chrome will put the autofill icon on the first writable text field, the icon is placed on the hidden input field.
Note: Making the input field hidden-type or setting its display to 'none' doesn't seem to work.
autocomplete="off" works in the current Chrome 68 as well as in Chrome 63.
Demo.
Try to remove the "Id" of the input.
That's how i fixed it.
When I am trying to change password in Chrome, there is always a dropdown list with "Use password for:" options. Is it possible to remove it? I have tried autocomplete="off" and autocomplete="false" but without success.
According to the spec, if you expect a new password to be filled in (which is why you would not expect auto-completion for example), you should rather specify autocomplete="new-password" for the input field.
This instruction is recognized by chrome.
They reported this as a bug in the Chromium project, but seems Google never actually looked at it or fixed it.
A workaround would be to change the name of the field.
You can also add invisible input fields, a demo could be found here.
I had the same problem it seems difficult to solve I found a solution
To solve the problem,
the input in initialization must be equal to type="text" and then change to type="password" with the first focus or insert input
function changeTypeInput(inputElement){
inputElement.type="password"
}
<input type="text"
id="anyUniqueId"
onfocus="changeTypeInput(this)"
oninput="changeTypeInput(this)"
/>