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.
Related
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.
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>
I know this was answered before but whatever I do, Chrome always shows a list of possible values.
For example, for this field:
<input type='text' id="sFechaCarga" name="sFechaCarga" class="font-12 form-control showCalRanges" autocomplete="off" />
Google thinks this field is a credit card field, showing suggestions for credit cards.
While for this other field:
<input type='text' id="sFechaEstado" name="sFechaEstado" class="font-12 form-control showCalRanges" autocomplete="off" />
Google thinks it is an state value, showing suggestions for states.
I tried to use autocomplete="none" or autocomplete="fdsgsgsg" as someone suggests in some SO threads. I have even used autoComplete="off". None works.
Any help, please?
Regards
Jaime
This is not a perfect solution, but it´s working right now. You should add readonly attribute, and then on focus, remove it. Quite simple, not so beauty (if you need it for lot of inputs, you could try adding it by js to minimize code).
<input type='text' id="sFechaCarga" name="sFechaCarga" class="font-12 form-control showCalRanges" readonly="readonly" onfocus="this.removeAttribute('readonly');" />
Fiddle: http://jsfiddle.net/0uzvqjfg/
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.
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.