How to prevent chromium based browser from sugesting personal information autofill for specific input?
<div class="form-group">
<label class="control-label" for="Nomenclature"> Nomenclature</label>
<input name="Nomenclature" class="form-control" id="Nomenclature" type="text" value="" autocomplete="off">
</div>
Somehow MS Edge assume this input is personal information, but it's not. As you can see, autocomplete is off for this input, so I guess Personal Information don't respect this attribute.
This behaviour is very annoying for users, because this input must be unique.
There are also other inputs in my portal that have this behaviour, and it makes no sense to users.
Simply add autocomplete="off" with form
More details:
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
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/
By suggestions, I mean the drop down menu appear when you start typing, and it's suggestions are based on what you've typed before:
For example, when I type 'a' in title field, it will give me a ton of suggestions which is pretty annoying.
How can this be turned off?
What you want is to disable HTML autocomplete Attribute.
Setting autocomplete="off" here has two effects:
It stops the browser from saving field data for later autocompletion
on similar forms though heuristics that vary by browser. It stops the
browser from caching form data in session history. When form data is
cached in session history, the information filled in by the user will
be visible after the user has submitted the form and clicked on the
Back button to go back to the original form page.
Read more on MDN Network
Here's an example how to do it.
<form action="#" autocomplete="on">
First name:<input type="text" name="fname"><br>
Last name: <input type="text" name="lname"><br>
E-mail: <input type="email" name="email" autocomplete="off"><br>
<input type="submit">
</form>
If it's on React framework then use as follows:
<input
id={field.name}
className="form-control"
type="text"
placeholder={field.name}
autoComplete="off"
{...fields}/>
Link to react docs
Update
Here's an update to fix some browsers skipping "autocomplete=off" flag.
<form action="#" autocomplete="off">
First name: <input type="text" name="fname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> Last name: <input type="text" name="lname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br> E-mail:
<input type="email" name="email" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');"><br>
<input type="submit">
</form>
On Chrome, the only method we could identify which prevented all form fills was to use autocomplete="new-password". Apply this on any input which shouldn't have autocomplete, and it'll be enforced (even if the field has nothing to do with passwords, e.g. SomeStateId filling with state form values). See this link on the Chromium bugs discussion for more detail.
Note that this only consistently works on Chromium-based browsers and Safari - Firefox doesn't have special handlers for this new-password (see this discussion for some detail).
Update: Firefox is coming aboard! Nightly v68.0a1 and Beta v67.0b5 (3/27/2019) feature support for the new-password autocomplete attribute, stable releases should be coming on 5/14/2019 per the roadmap.
Update in 2022: For input fields with a type of password, some browsers are now offering to generate secure passwords if you've specified autocomplete="new-password". There's currently no workaround if you want to suppress that behavior, but I'll update if one becomes available.
use autocomplete="off" attribute
Quote:IMPORTANT
Put the attribute on the <input> element,
NOT on the <form> element
Adding the two following attributes turn off all the field suggestions (tested on Chrome v85, Firefox v80 and Edge v44):
<input type="search" autocomplete="off">
I know it's been a while but if someone is looking for the answer this might help. I have used autocomplete="new-password" for the password field. and it solved my problem. Here is the MDN documentation.
This solution worked for me: Add readonly attribute.
Here's an update to fix some browsers skipping the
"autocomplete=off" flag.
<input type="text" name="lname" autocomplete="off" readonly onfocus="this.removeAttribute('readonly');">
autocomplete = "new-password" does not work for me.
I built a React Form.
Google Chrome will autocomplete the form input based on the name attribute.
<input
className="scp-remark"
type="text"
name="remark"
id='remark'
value={this.state.remark}
placeholder="Remark"
onChange={this.handleChange}
/>
It will base on the "name" attribute to decide whether to autofill your form. In this example, name: "remark". So Chrome will autofill based on all my previous "remark" inputs.
<input
className="scp-remark"
type="text"
name={uuid()} //disable Chrome autofill
id='remark'
value={this.state.remark}
placeholder="Remark"
onChange={this.handleChange}
/>
So, to hack this, I give name a random value using uuid() library.
import uuid from 'react-uuid';
Now, the autocomplete dropdown list will not happen.
I use the id attribute to identify the form input instead of name in the handleChange event handler
handleChange = (event) => {
const {id, value} = event.target;
this.setState({
[id]: value,
})
}
And it works for me.
I had similar issue but I eventually end up doing
<input id="inp1" autocomplete="off" maxlength="1" />
i.e.,
autocomplete = 'off' and suggestions will be disappeared.
<input type="text" autocomplete="off"> is in fact the right answer, though for me it wasn't immediately clear.
According to MDN:
If a browser keeps on making suggestions even after setting
autocomplete to off, then you have to change the name attribute of the
input element.
The attribute does prevent the future saving of data but it does not necessarily clear existing saved data. Thus, if suggestions are still being made even after setting the attribute to "off", either:
rename the input
clear existing data entries
Additionally, if you are working in a React context the attribute naturally becomes autoComplete.
Cheers!
I ended up changing the input field to
<textarea style="resize:none;"></textarea>
You'll never get autocomplete for textareas.
If you are using ReactJS. Then make this as autoComplete="off"
<input type="text" autoComplete="off" />
I have a basic text input for a login form and I'd like the browser to remember email addresses that the user has entered, but it's not working. I don't think I should need to add a full auto-complete system to get this to work since it's something the browser should be doing. I don't see anything special on sites I've visited where this works.
If I search for this problem all the answers are about disabling autocomplete.
Here's my login form:
<form id="login-form">
<fieldset>
<input id="email" type="email" placeholder="Your email" required="" >
<input id="password" type="password" placeholder="Pick a good password" required="" minlength="6">
<button class="login">Register</button>
</fieldset>
</form>
So the problem here seems to be that I didn't have a "name" attribute on my input. It also seems that I need to have specific values for the name. "email" works and "login" works, but "user_email" and "foo" don't work.
Surprisingly this started working as soon as I added 'name="email"' to the input, so it seems that Chrome was saving the values, but wasn't showing them.
This simple input is all you need for Chrome to do email autocomplete:
<input name="email">
I do not believe that you can force a user's browser to autocomplete.
HTML5 has an autocomplete form attribute.
Here is the W3C spec for autocomplete attribute.
However, even if you set this attribute to "on", the autocomplete of HTML forms is going to depend on the client's browser settings and configuration.
Although you can, as you said, disable autocomplete, there is not a way you can force the user's browser to autocomplete a form if they configure their browser not to remember form history.
For example, here is how to disable autocomplete for Firefox: https://developer.mozilla.org/en-US/docs/Mozilla/How_to_Turn_Off_Form_Autocompletion