Is there some way I can stop Chrome from auto populating input boxes? I have a page with a Sign Up form and a Log In form. In Chrome, if a user has already signed up and they've come to this page to log in, the password input box on the sign up form is populated with their password. I would really like to force the sign up fields to never auto complete.
I've tried setting autocomplete="false" but this makes no difference.
autocomplete="off" worked on our site.
You could simply use different field names.
Related
I have an advanced search form that terms/rows can be added to dynamically. I have noticed that the larger the form, then slower the form is when you click in a text field. Sometimes, you click in a text field and wait around 2 seconds on a moderately sized form before anything typed shows up.
It only happens when the text field is initially empty - and only in Safari.
I discovered that if I go into the Safari Preferences, go to the "Autofill" tab, and turn off all "Autofill web forms" checkboxes, the form is zippy - no lag. Apparently, Safari is trying to figure out how to suggest things to enter, like info from my contact card, usernames and passwords, credit cards, etc...
This advanced search form doesn't seem relevant to any of that (unless it tracks repeatedly entered search terms...?). So here are my questions:
Is there a way to tell Safari to not look for autofill possibilities, so that my form doesn't have this lag in Safari?
If #1 isn't an option, is there a way to make Safari's suggestions more efficient - so it can more quiickly figure out that there's nothing to suggest?
Regarding #2, my text fields have no label. The "labels" are the values chosen in the preceding select lists. Here's an example:
Note that after the 1-2 second delay, the autofill icon appears in the field:
Could adding hidden labels make Safari's autofill feature more efficient?
I tried and failed with various "solutions" I found here on stack:
Set attribute autocomplete="off" in both the form and input elements
Added a hidden label both above and below the input tag
Added a class name suggesting the input field type
Tried a javascript solution
None of them worked. I still experienced a delay between clicking in a field and being able to enter text - and the user icon still presented phone number suggestions from my contact card.
I read an old, but otherwise helpful article about how to coax autofill to fill in the correct information. It didn't mention the solution I stumbled upon, but it inspired me to try it...
I added a placeholder attribute to the text input in my django form class:
val = forms.CharField(widget=forms.TextInput(attrs={"placeholder": "search term"}))
And that did it! Now when I click in a search term field (which now shows "search term" in light gray - which is grudgingly OK with me), I can enter text right away and the autofill icon does not appear!:
I've seen other questions asking how auto-fill works, but the answers all explain how to make it work, which is not what I want. I want to stop it from working. And I also realize that there are many questions out there asking that specific thing, but the answer is always to set autocomplete=off, which we all know is useless because browsers don't honour it.
And besides that, my question is a little bit different because what I'm really asking is how the browser decides which inputs to populate with what data, because I'm hoping with that knowledge I can prevent the problem I'm having.
Specifically the issue I'm having is that every time I open up my "change password" page, my search input is automatically being filled with the username. I'm trying to understand why it's doing that so that I can prevent it.
My input does not have a name or a label or an autocomplete attribute. It's just very simply as shown here. So in what universe does it make sense for a browser to find a field with the id "searchinput" and think that it makes sense to auto-fill it with a username?
<input type=text id=searchinput placeholder='Search'>
Also, on the change password page, the first of the two password fields is automatically filled in (presumably with the matching password but I can't see it because it's all circles). So why are these browsers auto-filling my search input with the username and how can I prevent it?
To explain a bit further what my code is doing: When the user selects "change password" from the menu, I load my change password page into a div (using jquery load) on the existing page and slide it down to cover most of the browser window (minus the header and menu), which means whatever page they're currently on is still there underneath, and that's also why my search input is still visible. The auto-fill happens as soon as I load my change password page.
In my particular case, the reason the input field was being auto-populated with the username is because Chrome auto-fills the first password field it finds (and you can't stop it), and then also auto-fills with the user name whatever input field comes before the password field in the DOM, regardless of what the name, id, or purpose of that field might be. In my case, it was the search input.
So to get around this I had to create another input just before the new password input and hide it out of view with absolute positioning so that Chrome will fill this useless field instead of my search input. Sigh.
<input type=text style='width:0px;position:absolute;right:-100px'>
I also added an "out of view" password field so that Chrome will auto-fill this field instead and not the first password field in my form.
<input type=password style='width:0px;position:absolute;right:-100px'>
I'm having a bit of an issue with autocomplete and wondering if anyone has found a way around this. Since browsers have started ignoring the autocomplete="off" attribute, I'm having a spot of bother with autocomplete in my admin area for creating new users filling in the login credentials that I've logged in with.
I've tried MDN's suggested hack autocomplete="none", I've tried randomising form input names, I've even tried using JavaScript to change a text field to a password field (with varying timeouts) - but every time the mere presence of a password field causes the browser to immediatley autofill the password. If there's a text field above the password field, that'll get autofilled too.
I'm fine with it being out of my hands on the login form, if anything it encourages users to have more secure passwords, but in the admin area I think it's a bit unfriendly for the user and really would like to disable or workaround it without changing the password field to a text field.
Note: The browser I was using was Firefox 51.0.1
I perhaps should have posted this a while ago, but hey, better late than never.
There is a work-around for this by simply including the following 2 elements at the top of them form:
<input type="text" style="display: none;">
<input type="password" style="display: none;">
These elements get autocompleted with the username, leaving my password/confirm password fields - and the preceeding text field - blank.
autocomplete="off" is not what I am after. Basically, on my registration form there are fields "phone" and "password" placed one above the other. (see screenshot)
The "phone" field gets, annoyingly, prepopulated with a username, as I guess what the browser is doing - the browser finds a field of type password and assumes the text input field just before it is a username field. The effect is this:
Why I am not interested in the non-standard autocomplete attribute for the phone field, is that I do want user to be able to fill this form as easily as possible and if they have previously entered their phone number on other sites (into fields called "phone") they could benefit from this showing up as they start typing into the field. That's why I don't want to turn autocomplete off altogether.
I was thinking more in the direction of reorganizing the fields somehow to avoid this behaviour. Or some way of telling the browser that the field above the password field has nothing to do with it, or that the password field is not used for authentication purposes. Somehow mark it as that. Or inject some invisible element inbetween these two fields?
Any ideas?
Markup used:
<input id="phone" name="phone" type="text" value="" maxlength="30">
<input id="newPassword" name="newPassword" type="password" value="" maxlength="20">
I am getting this behaviour on Chrome, FF, (not sure about IE, got an archaic version of that on my machine, don't even want to start worrying about IE yet.)
Most password managers will search the first password field, and the closest text field before it.
So all you have to do is add invisible text and password fields (display:none) above "new password".
Firefox tries to interpret 3 password fields as a "change password" action, so if you don't want that you should be safe adding yet another invisible password field.
I had a similar issue with the set password field. Try
<input type="password" autocomplete="new-password">
From MDN input documentation:
autocomplete
This attribute indicates whether the value of the control can be automatically completed by the browser.
Possible values are:
....new-password: A new password (e.g. when creating an account or changing a password)
For the phone number issue, I set this and it stopped autocompleting the username there.
<input type="tel">
A home number cannot be 30 characters, this is probably why the browser is assuming it could be a username or login email due to the size. Change it to something real and see what happens.
Also, consider having 3 field for phone number, area code, prefix, suffix. Once a certain number of digits are filled, you can auto focus using JavaScript the next phone segment field so it's easier for user.
Have you also tried changing positions of fields? What's happened?
Also, just to make sure, you can turn off auto complete on a particular item during registration without worrying that it will be off during login (cuz it won't) unless you turned it off for the login fields as well, and of course you have no need to.
Also, delete your unused saved form auto complete stuff, could just be a local issue with your version, you may have entered a bad value one day in one of the browsers, and then you installed the other browser (chrome or FF), and then the newly installed browser copied the rules exactly as they were from your original browser.... So, you end up thinking it's a global issue with your form, simply because of one bad entry and because your second installed browser copied and replicated the bad entry rule from your first browser, making it look like a real, universal problem to you, get me? So try the browsers InPrivate modes, or try the browsers from a different installation or a different computer, or from a virtualpc instance you may have.
Otherwise, export all your setting from your browsers and uninstall both browsers, then reinstall from scratch FF and chrome, then test your webpage, then feel free to import your exported settings back.
Also, test on IE even if it is for the insight it may give you, know what I mean?
Hope this helps, let me know how you get on, and if you have any other questions.
UPDATE:
Given the method you've chosen, what you should be able to do is, when rendering the phone field, add a value=" " attribute into the input tag, instead of using JavaScript. This should prevent the pre-filling from occuring without needing to use javascript. Now, if you want to go one step further, you can do this:
During the OnLoad Event of when page loads, check the phone field using JavaScript, and if the value equals one space (" ") then overwrite it with an empty string using JavaScript once onLoad is triggered. Or, if the browser is still prefilling (i doubt it will but if it is) you can delay this check by a few hundred milliseconds and run the javascript a few hundred milliseconds after the page has loaded, or tie it to all or some of the input fields onFocus events, so as soon as any of the fields gain focus, you do the "does phone.value equals one space character (" ") and if it does, overwrite it with and empty string, i'm even more certain the browser isn't going to jump in and hijack that field in this situation. Although, as mentioned, even if you do this onLoad, i doubt the browser will hijack your field, as the pages/javascript onload occurs AFTER the browsers internal onLoad (DocumentComplete) event occurs, and worst case scenario, you can do the few hundred millisecond lag or onFocus method, but i doubt you will need these.
Let me know how it goes.
I tried disabling the input fields type=text& type=password after loading of the DOM then enabled all the disabled fields after certain milliseconds lets say 100. It seems to be working for me.
Try :
$(document).ready(function()
{
$("input[type=text],input[type=password]").prop('disabled','disabled');
$("body").delay(10,function(){
$("input[type=text],input[type=password]").prop('disabled','');
});
});
I have two sites, both under the same domain.
I have set autocomplete="off" for a login field in one site (site 1), and not for another site (Site 2).
When I fill out the login field in Site 2, firefox asks me if I would like to remember them and I say yes.
I then return to Site 1 and select the down arrow in a login field that I have the autocomplete set to 'off'. It displays the login details I saved in Site 2. I don't want this.
Is there a way to prevent this happening?
Is the only option to set autocomplete="off" on all relevant fields in site 2 also?
Thanks
Do you have a "name" or "address" field in your form? In this case, Firefox might ignore the autocomplete attribute. See https://developer.mozilla.org/en/How_to_Turn_Off_Form_Autocompletion#How_to_Turn_Off_the_Autocompletion_Feature
autocomplete is a non-standard attribute introduced by Internet Explorer anyway, so you shouldn't expect it to work everywhere. Personally, I don't like it since it should be up to the user to decide whether they want autocompletion or not.
Ok, I set the autocpomplete="off" on Site2's attributes, this made sure the user could not save them and they therefore never show up in site1 now...which is what I want.
Just to clarify - Setting autocomplete="off" simply prevents the browser from saving/remembering the values you entered, it does NOT prevent fields on your getting populated with values you may have saved from another another site that has not got autocomplete implemented on its ownfields.
Firefox always consider the previous field of a password field as the username field. Thus a possible fix for this is, put a input field between username and password in the login page of site1 and add style="display:none" for the input field. So that the FF will consider the hidden input field as the username field and as the display of the input field is none, the user cannot double click or press down arrow on the filed to get the usernames. This may work for you.