I am currently working on an Angular web-application.
This application consists of two single-page-applications:
- Login-Page, accessible over "domain/login.html", containing login-logic.
- Application-Page, accessible over "domain/", containing the concrete application.
If you try to access "domain/", the server redirects you to "domain/login.html", if you are not logged in yet. Otherwise you will get the Application-Page (no redirect).
In the concrete application there is a Change-Password-Page, where you have to enter the old password and the new password (twice).
The problems start, if you say "save password" on the login-page. The saved password is automatically filled inside the "Old-Password" field.
Also there is another page having a text field and a password field directly after each other (where the text-field is for a phonenumber) and the browser inserts the username into the "phonenumber"-field and the password inside the password field. This is really strange, as the fields have different names and ids and are even on another page (again one is "/login.html" and one is "/")
As this behaivor is incorrect i would really like to disable it. However I was not able to do that until now.
What i tryed:
autocomplete=off, for form and input-tags. This seems to be ignored by most modern browsers.
Two hidden (display:none) input-fields (text + password) on first position. Seems to work for Firefox, but Chrome and Opera still give you the possibility to autocomplete the fields.
Use type="text" for password-field and change it to password inside javascript-code. Again Opera and Chrome still give possibility to autocomplete those values.
So I am looking for a (clean) solution to turn off the wrong autocompletion.
Is that somehow possible?
I have been encountering this issue lately, specifically with chrome. It seems that
autocomplete="off" || autocomplete="false"
are not being picked up anymore by Chrome (or most other browsers as far as i'm aware). I found the following sources helpful :
Chromium (which i believe is what a lot of Chrome is based on) has the following code that shows the regex that is used when finding fields to populate with Chrome's autocomplete:
https://cs.chromium.org/chromium/src/components/autofill/core/common/autofill_regex_constants.cc?sq=package:chromium&g=0&l=262
I feel like they only other work around that I have found is to follow these conventions :
https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
Or at least make sure that you give an attribute that's disimilar enough from the above list so it that wont get picked up by autocomplete features.
Related
Problem Background & Steps
I am using Chrome 58 on a Mac OS version 10.12.3.
Something like this is happening: StackOverflow - What is _lpchecked=“1” for in a form?
This attribute is added to the parent form element when I click inside of a child input element.
My problem is that when this happens, the attribute "autocomplete=off" is added to the input element.
When switching between child input elements, this attribute is added to the currently focused element.
The element names are "to_email" and "comments".
This is not a login form, but a sharing form.
This seems to happen based on me having the LastPass extension, the name of the variable, and a bit of online searching.
I have tried going into the LastPass Account Settings area, "Never URLs" section/tab, and adding the URL to the "Never Do Anything" category.
The URL is of the form sub.domain.tld/path/resource.php?queryParam=value. LastPass would only allow me to add the URL without the query portion to the list, even when I tried a wildcard asterisk (*) for the value.
Even after accessing the LastPass Extension Menu > More Options > Advanced > Refresh Sites, Clear Local Cache, and refreshing the page, this problem still occurs.
I did not see any information in the Hacker News article about a similar signon.overrideAutocomplete property in Chrome like Firefox has, and may not want such a broad solution anyway.
I don't want to have to install another extension like autocomplete-on
(seems to not exist) and have functions 'battle' each other, which may not even produce desirable results, like working at all, or flipping constantly.
I have even searched for what else might be doing this with words such as "adding attribute" and "dynamic", but Google biases the results to less complex scenarios about specific pages, something I could try to solve with TamperMonkey if I wanted to.
If there was any such problem like 'sniffing' for more autocomplete information, as somewhat mentioned by these links:
yoast - Why you should not use autocomplete
Alex Maccaw - Chrome’s requestAutocomplete()
Then hopefully it should be fine if I only fix this problem on a limited basis, especially only for forms with insensitive data.
Questions
How can I prevent LastPass from adding this attribute?
Is it just LastPass doing this?
Have I entered the URL correctly to "Never Do Anything"?
Funny Link
Hacker News - The war against autocomplete=off (2013)
For now it seems to work if I add a TamperMonkey script to overwrite the value.
This is not as large a solution as the jonmetz fellow mentioned making his own plugin (his is in Firefox), and can be duplicated as needed. If this is needed a lot, then maybe an extension would be more convenient.
Because of the dynamic and repeated nature of the issue on the page, a simple assignment did not work, and was overwritten.
My preference for the attribute remains as the end result if I add an onFocus Event Listener thusly:
var emailInput = document.querySelector('input[name="to_email"]');
emailInput.addEventListener('focus', function(){
this.autocomplete = "on";
});
I also do this in case it helps at all:
var parentForm = emailInput.parentNode;
parentForm.setAttribute('_lpchecked', '1');
I have an input text field, when user enters any alphabet/word, I have to suggest relevant topics.
The problem here is, the browser is also doing the same thing. It is showing previously entered data, which overrides the information shown in the site.
PFB the image, the circled black d, is a suggestion by browser (firefox in this case) and below list, (Git-Commands, Equals Method etc) is shown by me.
I want browsers to stop showing suggestions for this particular field.
How to do that?
The site is build in simple HTML and JavaScript.
Reference The searchbox on homepage on : mohitkanwar.com
PS: I have tried using autocomplete="off" . It does not work here, as it is not autocomplete, it is suggesting.
<input autocomplete="off">
Should do it. It will NOT work on login-fields, however, as most Browser vendors decided to ignore the setting there. Further Information:
https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion
Use the autocomplete attribute, see http://www.w3schools.com/tags/att_input_autocomplete.asp for details.
I followed the advice given in this other Stack Overflow post and used a pattern found in the list of regexes used by Chrome, but for some reason Chrome is still not detecting that my field is a credit card field.
Safari detects it just fine.
Here's the input HTML, as shown by the web inspector:
<input class="control" id="card_number" type="tel" name="card_number"
value="" autocorrect="off" spellcheck="off" autocapitalize="off"
placeholder="Card number" data-reactid=".0.1.1.0.0.5.0.0"
x-autocompletetype="cc-number" autocompletetype="cc-number">
Yes, as you can see from the data-reactid, I am using React. Maybe that has something to do with it. Who knows!
I've set up a test page so that others can play with it. You can visit https://entire.life/payment-form-test in Safari, and (if you have autofill enabled and a credit card saved to it), it will pop up. If you visit it in Chrome, it will not pop up the autofill option. Even after typing the first letter of your card.
This code is open source. You can see the source for the /payment-form-test page here.
It will work if you add following attributes to respective input elements:
autocomplete="cc-number"
autocomplete="cc-exp"
autocomplete="cc-csc"
Also I noticed that Chrome will not autocomplete if one of the cc fields is missing.
You can play around here - https://jsfiddle.net/q4gz33dg/2/
Name your expiration fields card_expiry_month and card_expiry_year. I'm not sure why your current names don't trigger the regex, but changing the names seems to work.
http://jsfiddle.net/7b6xtns7/ (it's a bit messy since it's not rendered)
Edit:
Looks like ordering has to do with it too. If that doesn't work try putting the month/date immediately after the number entry field
http://jsfiddle.net/c86Lmo0L/
The accepted answer is great, thought I'd just chime in with some documentation and a note regarding React (tagged for this question)..
React requires you to pass the attribute as autoComplete="cc-number" (note camelCase), otherwise it will default to autocomplete="off".
More info:
React attributes: https://facebook.github.io/react/docs/tags-and-attributes.html
Useful examples: https://developers.google.com/web/updates/2015/06/checkout-faster-with-autofill
https://html.spec.whatwg.org/multipage/forms.html#autofill
I can confirm that. For instance, some websites only have autocomplete without any value as tag attribute.
By opening the web dev console (CTRL + SHIFT + I) I could jump to the element, double click the autocomplete tag to replace it autocomplete="cc-number", and double click in the field to autocomplete the CC details by the opening selection dialog.
All that alteration can still be much faster than fiddling with the credit card details from another app or physically holding the card .
I have placed labels in my input fields to have explanatory text display in the background and when the user types in the field, the text disappears. I'm using the example explained here: How to create a label inside an <input> element?
and specifically at http://attardi.org/
When the password though is saved by the browser such as in Google chrome, the text becomes garbled as in this image (this is currently on my local computer):
The background text is not disappearing for saved passwords. Any help would be appreciative - thanks.
You could also take advantage of the new placeholder attribute. Read about it here.
No IE support, though.
Option 2 would be using Jquery. Since you're already using Jquery for the label solution, you could add code that checks the value of the input after the document has loaded then show or hide the label accordingly.
This code would go inside the document ready function:
$(function() {
// Handler for .ready() called.
});
Just use the placeholder attribute – it's so simple:
<input type="email" placeholder="email" />
Literally, that's it; the browser will take care of the behavior.
Yes, it won't work in IE (until IE10 is released) – but you've already got labels next to the fields anyway, so it's not like IE users won't be able to tell which fields are which.
I investigated further, and this only occurred in Google Chrome and not Mozilla Firefox. My setup was correct and looks like it might in fact be a bug in Chrome. See issue log: http://code.google.com/p/chromium/issues/detail?id=117661
This also looks like it will occur for the placeholder attribute too when Chrome tries to do password autosave process and doesn't look to see if there is a previous inputted value.
Thanks for the input from all.
I am building an application for android, using jquery mobile (windows 7).
i have a function focus and using this function for example: you have a text field, and you want the text field to only accept numbers, and if you put in any string values an error will appear.
The problem is that when I run the app on mobile the focus function doesnt work. (it works, if you give it an string an error will appear, but then you cant click on other fields, and when you click on same field the error message won go away you have to remove it manually) but when I run the same code in my local host it works just fine.
I would use the autofocus and pattern attributes available in html5.
autofocus is simple enough in that the field its on will get the focus on page load and pattern allows you to specify a regex that this particular field must adhere to.
http://html5pattern.com/