I have a form where I've implemented an autosuggest dropdown (via jQueryUI) so that a user can search for a contact in our app and have their information auto-filled. I want autocomplete to be disabled on the form, but Safari (on macOS) is ignoring autocomplete="off". I have specified autocomplete to be off on the input fields, as well as in the <form> tag. This form is for a physical mailing address for a friend, and Safari is showing matching contacts from Contacts.app... but it is overlaying a dropdown on top of my autosuggest dropdown. How do I force Safari to stop showing this dropdown?
<form accept-charset="UTF-8" action="/listings/sailing/create_customized_card" autocomplete="off" class="new_greeting_card" id="new_greeting_card" method="post">
...
<li>
<input autocomplete="off" autocorrect="off" class="validate required" id="to_name" name="delivery[to_name]" placeholder="First & last name" size="30" type="text" />
</li>
<li>
<input autocomplete="off" autocorrect="off" class="validate required" id="to_address_street_1" name="to_address[street_1]" placeholder="Street 1" size="30" type="text" />
</li>
<li>
<input autocomplete="off" autocorrect="off" id="to_address_street_2" name="to_address[street_2]" size="30" type="text" />
</li>
<li>
<input autocomplete="off" class="validate required city" id="to_address_city" name="to_address[city]" placeholder="City" size="30" type="text" />
<select class="validate required state" id="to_address_state" name="to_address[state]">
<option value="AK">AK</option>
...
</select>
<input autocomplete="off" class="validate required zip" id="to_address_zip_code" name="to_address[zip_code]" pattern="(\d{5}([\-]\d{4})?)" placeholder="Zip" size="30" type="text" />
</li>
...
</form>
FYI - I know that most browsers ignore autocomplete="off" for username and password fields, but these are address fields for a contact.
It seems you can't disable autocomplete in a similar way.
Safari looks for certain keywords in the id of the element and if there is something like "name", "address", "e-mail" etc., it enables the autocomplete function (tested on Safari 10.1.1).
So, the only simple workaround that I've found is to use a different id that doesn't trigger the autocomplete function.
EDIT: I found out that Safari also uses the placeholder attribute to determine whether to enable autocomplete function or not.
Just to add one wrinkle to the other fine answers...
I found empirically that Safari get its hints from a) the name of the field, b) the associated label, or c) adjacent text. It figures out things like field names "name", "firstname", "lastname", and labels or adjacent text like "name", "First name", "Last name".
In my application, it was competing with a custom autofill. I defeated my dropdown as follows:
I changed my field name from xx_firstname to mxyzptlk, and the label from First Name to First Name. The character is a zero width non-joiner. You can't see it on the screen, but it appears to defeat Safari - at least for now!
I had the same problem, overlapping dropdowns. What you could do is change the 'name' string (in the input's placeholder) by changing one or some of the characters into a homoglyph.
What I did was change the 'a' character with 'ɑ' character. Looks a bit weird, but it's worth getting rid of the annoying overlap.
Just make sure you document it in the html-code.
Also, I noticed that the field's description in a P tag above the input was used by Safari to trigger the autocomplete function.
Another hack I found based on #worddragon answer was to use and letter-spacing.
disableAutoFillHack(localizedContent) {
return localizedContent.split('').join(' ');
}
...and then add // adjust the letter spacing based on the font sizes
.autofill__disable {
letter-spacing: -0.125em;
}
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.
Our contact-management software enables users to add contact details for their friends to their account.
One of the details you can add is "email address". However for some reason on Safari the email address field gets autofilled with the user's own email address that they use to log in. It doesn't happen if you turn off the "autofill" option under "preferences", but that's obviously not a workable solution for all our users.
I've tried adding autocomplete="off" but it seems that this is just ignored by Safari.
Here are the two fields:
Login Field:
<input type="email" class="input-block-level" placeholder="Email address" name="email" id="user_email">
Internal Field:
<input type="text" id="pri_email" autocomplete="off" name="pri_email">
What I can't understand is why Safari even thinks they are the same thing. They have different ids and names.
How can I stop this from happening? Preferably without hacky work-arounds like the ones suggested here.
Set AUTOCOMPLETE = off in the form tag.
<FORM METHOD="POST" ACTION="" AUTOCOMPLETE="off">
Check this one - Change the type for text to email
<input type="email" id="pri_email" autocomplete="off" name="pri_email">
Use in the tag form autocomplete=”off”
and still if not works it is because autocomplete=”off” is not valid markup with XHTML Transitional, that is common DOC TYPE. Use this to keep a valid markups try this.
if (document.getElementsByTagName) {
var inputElements = document.getElementsByTagName(“input”);
for (i=0; inputElements[i]; i++) {
if (inputElements[i].className && (inputElements[i].className.indexOf(“disableAutoComplete”) != -1)) {
inputElements[i].setAttribute(“autocomplete”,”off”);
}
}
}
Apparently, the state off / on is still not correctly implemented in all browsers.
However, for most browsers, an "invalid" value seems to produce the desired effect of "off".
Try this:
<input type="text" id="pri_email" autocomplete="nope" name="pri_email">
it works with fake input:
<input autocomplete="off" type="text" name="email">
<input type="text" name="fake_email" id="fake_email" style="height: 0px; width: 0px; overflow: hidden;" tab-index="-1" aria-hidden="true">
autofill single field email in Safari (ios) does not working
Luckily there is an "easy" solution.
Inserting text with the word “search” into the name attribute will prevent Safari from showing the AutoFill icon and keyboard option. This works because Safari performs a regex and maps “search” to an input that does not require the AutoFill.
<input name=”notASearchField” />
Source: https://bytes.grubhub.com/disabling-safari-autofill-for-a-single-line-address-input-b83137b5b1c7
you can use
<input type="email" class="input-block-level" placeholder="Email address" name="email" id="user_email" value="">
The reason is that safari ignores autocomplete. It will accept it if the version of Safari is 5.2 or higher. It is mentioned on w3schools.com
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" />
This question already has answers here:
Disabling Chrome Autofill
(68 answers)
Closed 5 years ago.
I have a input type text for user to change their email & password in account setting page.
How can stop Chrome auto fill the input.
Chrome remember the input data from log in page and it auto fill in account setting page.
Chrome auto fill the input change my email & password in account setting page
We are no longer dependent on hacks for this. You can set autocomplete to new-password and it will work as intended.
<input type="password" name="pwd" autocomplete="new-password">
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#attr-autocomplete
Are you explicitly setting the values as blank? For example:
<input type="text" name="textfield" value="">
That should stop browsers putting data in where it shouldn't. Alternatively, you can add the autocomplete attribute to the form tag:
<form autocomplete="off" ...></form>
Solution 1:
Putting 2 lines of code under under <form ..> tag does the trick.
<form id="form1" runat="server" >
<input style="display:none" type="text" name="fakeusernameremembered"/>
<input style="display:none" type="password" name="fakepasswordremembered"/>
...
Read more
Solution 2: It removes "name" and "id" attributes from elements and assigns them back after 1ms. Put this in document get ready.
$('form[autocomplete="off"] input, input[autocomplete="off"]').each(function () {
var input = this;
var name = $(input).attr('name');
var id = $(input).attr('id');
$(input).removeAttr('name');
$(input).removeAttr('id');
setTimeout(function () {
$(input).attr('name', name);
$(input).attr('id', id);
}, 1);
});
Solution 3: Tested in Chrome 60.0.3112.101
<input type="password" name="pwd" autocomplete="new-password">
This issue still exists as of Version 55.0.2883.87 m. (on Windows 10)
Solutions like setting the autocomplete attribute on a form
or adding fake input fields and removing the name attribute before submit do not work anymore, since Chrome ignores or instantly auto-completes them on removal.
The only way to get it currently to work as intended is to set the autocomplete attribute to "new-password"
<input type="text" name="text" autocomplete="new-password">
even on non password type inputs.
The latest version of Chrome (46.0.2490.86) appears to have changed behaviour again. This time, AutoFill has nothing to do with autocomplete or readonly or other workarounds suggested here (and on these bug reports https://code.google.com/p/chromium/issues/detail?id=468153, https://bugs.chromium.org/p/chromium/issues/detail?id=587466)
Rather, AutoFill now looks at the label next to the input box and generates an AutoFill based on that (as well as the id and name). A big clue is how AutoFill can actually fill multiple fields at once (e.g. Street, Suburb and State). It appears to be using several techniques (label, name, id) to discern the spatial relationship between fields.
So a workaround is to insert junk text into the label inside a hidden span...
S<span style="display:none">_</span>uburb:
...and also obfuscate/remove the id and name. This was the only thing that prevented Suburb AutoFill for me.
Unfortunately autocomplete="off" didn't work for me (anymore). So here is my solution:
First read and then remove "name" and "id" attributes from elements. Then, after 1ms, set these attributes back again with values read before. For me it works :)
<form autocomplete="off"><br />
<input type="text" name="username" id="username" /><br />
<input type="password" name="password" id="password" /><br />
</form>
<pre>
$('form[autocomplete="off"] input, input[autocomplete="off"]').each(function(){
var input = this;
var name = $(input).attr('name');
var id = $(input).attr('id');
$(input).removeAttr('name');
$(input).removeAttr('id');
setTimeout(function(){
$(input).attr('name', name);
$(input).attr('id', id);
}, 1);
});
</pre>
By setting autocomplete="new-password" , it works.
Before testing, you clear browsing data first
Almost jumped out the window trying to solve this... seems Google now ignores Autocomplete ON and OFF. I had used on older fix (such as fake hidden password fields - which also no longer worked). Based on the living standard spec - you need to use an auto-fill tokens instead. You must use them in the appropriate use-case context. Hope this is helpful.
https://html.spec.whatwg.org/multipage/forms.html#autofilling-form-controls:-the-autocomplete-attribute
Chrome ignores both autocomplete="anything" and hidden fields. A HTML/CSS workaround would be using an absolute positioned password field before the real one:
<input type="text" name="username" required>
<input style="visibility: hidden; position: absolute; left:-99999px" type="password" name="fakepasswordfieldtoturnoffautocomplete">
<input type="password" name="password" required>
EDIT:
As referred in multiple other answers in other duplicate questions, the most elegant working solution so far is this:
<input type="password" readonly onfocus="this.removeAttribute('readonly');"/>
Try hidden password element
<form>
<input type="text" name="fakeusername" class="fake-autofill-fields"/>
<input type="password" name="fakepassword" class="fake-autofill-fields"/>
...
...
</form>
<script>
$(document).ready(function () {
$(".fake-autofill-fields").show();
window.setTimeout(function () {
$(".fake-autofill-fields").hide();
}, 1);
});
</script>
Enter a value of ' ' (a blank space) for the username field and Chrome doesn't autopopulate username or password.
<input type = 'text' value = ' ' name = 'username' />
If you're ever populating the username with a user-entered value, code to enter a ' ' if there's no user-entered value.
Try this:
<div id="form_container">
<input type="text" name="username" autocomplete="off">
<input type="password" name="pwd" autocomplete="off">
<input tytep="submit" name="login" id="login" value="Log In">
</div>`
The jquery code:
jQuery("#login").click(function(){
jQuery("#form_container").wrap('<form method="post"></form>');
jQuery("form").submit();
});
If you don't wrap your input fields into a form, then the chrome's autofill won't come up.
When you click on the submit button, just frap the fields around the form and fire a submit() on the form.
I had a similar problem. After all of the attempts failed. I tried this hack of setting
type = "search"
instead of text. Even though its not a pretty hack. It does not cause any issues in majority of cases. type search is no different than text as of now.
This works:
<form autocomplete="off" ...></form>
Tested on Chrome 56.0.2924.87 (64-bit)
I'm encountering a problem in Chrome where form submission results in the following error:
An invalid form control with name='ctl00$cphMain$ctl01$groupControl$website' is not focusable.
This is an <input type="url" ...> rendered in Chrome inside a <div> that has display:none set (until the neighbouring checkbox is checked). There is no required attribute, nor is there a maxlength attribute set, so I'm unsure as to why the submission fails. Here is the relevant section of markup (the control in question is inside the 2nd <fieldset>):
<label class="checkbox">
<input id="ctl00_cphMain_ctl01_groupControl_ctl13" type="checkbox" name="ctl00$cphMain$ctl01$groupControl$ctl13" onclick="$(this).parent().siblings('div.expandableContainer').slideToggle();"/>
Include contact...
</label>
<div class="expandableContainer form-expanded js-initial-hide " style="display: none;">
<fieldset>
<label>
Name:
<span class="req">*</span>
</label>
<input name="ctl00$cphMain$ctl01$groupControl$name" type="text" maxlength="100" id="ctl00_cphMain_ctl01_groupControl_name"/>
</fieldset>
<fieldset>
<label>
Website:
<span class="req">*</span>
</label>
<input name="ctl00$cphMain$ctl01$groupControl$website" type="url" id="ctl00_cphMain_ctl01_groupControl_website" value="http://" onblur="if (this.value == 'http://') this.style.color = '#666';" onfocus="this.style.color = '#000';" style="color:#666;"/>
</fieldset>
<fieldset>
<label>
Email:
<span class="req">*</span>
</label>
<input name="ctl00$cphMain$ctl01$groupControl$email" type="email" maxlength="100" id="ctl00_cphMain_ctl01_groupControl_email"/>
</fieldset>
</div>
According to W3.org (http://www.w3.org/TR/html401/interact/forms.html#successful-controls), this is supposedly a 'successful' control. Even adding a MaxLength of 2000 (the DB field width) doesn't work. No errors are received for the surrounding controls.
Is there any idea why this form submission is failing? Checking the box (to cause the surrounding <div> to be displayed (with display:block) allows the form to be submitted without any problems.
Many thanks.
Well I discovered the problem: The invisible URL fields (<input type="url" ... />) had a non-empty value set (basically part of a legacy JavaScript solution to implement placeholder text). For some reason, this value in an invisible field trips up Chrome (possibly from their built-in validation, that other people discussing similar issues have alluded to). Perhaps Chrome misses the lack of visibility specified in the ancestor <div>.
How I fixed this:
Removed the onblur, onfocus and style attributes as they are redundant;
Changed the value attribute to the new HTML5 placeholder attribute, keeping the same attribute value.
The only drawback is that site visitors must manually enter the "http://" in the field rather than append to it; our project team will discuss strategies to improve the UX of this.