When a user creates an account on certain sites, it sometimes require the user's basic information such as name, email, and location. Chrome has the ability to autofill this form if the user had previously entered his/her information.
My question is: is it possible to detect/identify whether the page the user is visiting can be autofilled?
A naive solution would be to parse every page for forms that can be autofilled. But is there a more elegant solution?
What do you want exactly? Every form CAN be autofilled, obviously, so the answer is YES to the question in your text.
The question in your headline is a much different one - HAS the form been auto-filled?
There is a pretty good approximation: if you check on load if there are any values in the form (that differ from the ones you sent), and there are, the user can't have filled them manually, obviously. So then you know that auto-fill has taken place.
On the other hand, it almost sounds as if you are looking for a generic solution not for your own site but for a browser extension you yourself want to write? In that case the solution is the same though, immediately on page load look at the values the page provides and see if the ones actually there differ. I'm not exactly sure, but the onload event should be fine, I think autofill doesn't happen before the page has loaded. Maybe you'll even need to add a few hundred milliseconds on top of the onload event. The user can't type much anyway in less than a second, or select checkboxes etc., so it's still a very good guess.
Anyway, even after re-reading your headline and your question I'm actually MORE confused about what exactly you want to achieve - but as Douglas Adams wasn't the first one to try to teach us, often it's not the answer but the question itself that is the problem :)
well, you can check for the default value value="VALUE" has changed
i.e:
if (getElementById('inputID').value != 'VALUE') { // DO SOMETHING }
or
check if value has changed:
input type="text" onchange="alert('changed')">
one of these two should help you ( i hope :) )
You could use
document.querySelectorAll('*:-webkit-autofill');
to get all elements autofilled.
Then you just have to check if any new elements is in there in a loop.
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');
Taking JavaScript this semester. I cannot grasp how this property can be useful at all. This property gives a Boolean value of true IF the checked attribute was used in tag for the check box object...BUT if I am the one writing the program ...I should know if I wrote that into the program correct? I just do not see the logic in this property. Anybody have a better reason for the use of it?
First, to answer your question, "Don't I know?". Of course not. If you are thinking of a form that is only used to add records, I could see your point but forms are also used to update records and we have no idea what the initial value is for any given record that may need to be updated.
The next thing to understand is that the same concept applies to more than check boxes. For example the text input elements have a "defaultValue" property that parallels the logic of default checked property.
The next point, is these properties would be better understood by novices had they been named "initialxyz" rather than "defaultxyz". Novices think that they are used to identify what should be sent to the server if not populated by the user but that is not what they are at all. They are the initial value, as sent by the server to the client, before the user starts interacting with the screen.
To answer your larger question, these propertied are extremely useful in two cases. The first has already been mentioned which is the "reset" button or as I jokingly call it the "oops" button or "start over". That can occur at the record level that resets every element on the form but it can be used on a field by field basis where only the field that has focus is reset. For example, the escape key is often used for this purpose. The second use for this is to know if the form is "clean" (unchanged) or dirty (changed, in at least one small way somewhere). This is used in too commentary places that you did not think about. The first is to avoid submitting a form with no changes to the server. Why waste resources. The complementary is to pop up the "are you sure you want to lose your changes" when someone attempts to navigate away from a form with changes. You walk the form and compare the current valued to the initial value for each element. If no elements changed the form is clean and allow the user to leave without a prompt. If at least one element is different than it's initial value and take appropriate action which might be to prompt to confirm leaving or it might be to submit the form changes to the server before leaving or something that neither of us have thought of yet.
Hypothetically, you might have a form with lots of fields written in html, and you may want to have a "reset" button which resets all of the form fields back to their initial values. (I don't really know why that used to be a common form button, I've never seen a use for it...) The code to reset checkboxes would then be:
input.checked = input.defaultChecked;
which would be the same for all checkboxes, and then you wouldn't need to track the difference between default checked and no default checked ones separately.
Really though, it doesn't appear to have much use, and I've never used it before.
One scenario would be when you are creating checkboxes dynamically, on-the-fly, in your code. The creation may be dependent on a couple of parameters, some of them depending in turn on selections by the user, from the current screen/page.
You may wish to set what is the state of these newly created checkboxes by default, before the user performs any actions on them.
Exemplifying: Say you have a textbox where the user has to tell you how many new checkboxes you should create for whatever further actions. Then after the user enters the input, your javascript creates N checkboxes, accordingly. And their initial state is set according to "defaultChecked".
Just yesterday I found myself using this same attribute. It comes in very handy when trying to set certain values to default.
Have you ever signed up for something ad then found yourself receiving TONS of unwanted newsletters? or you install one thing and two more things start installing? This happens because there was an option somewhere with a checkbox that had the checked attribute to make that decision for you.
Mostly it is used to make decisions for the user. Comes in handy sooner than later!
BTW: Welcome to the sweet world of JavaScript!
So I've scoured the internet for a way to hide the url at the bottom of a page printed using window.print, and it seems the only way to do it is for the user to disable the option in their page settings.
Not ideal, I'm trying to hide the address to our serviceNOW instance from being printed on a form that will be given to our clients customers.
So with hiding it out of the question is there a way I can mask it to say something other than the actual url?
I'm not sure but I think solution 3 here is doing something like this
http://www.codeproject.com/Questions/424312/Can-anyone-help-me-to-hide-Header-Footer-and-Page
But I don't understand that at all.
Is it possible to fool the print dialog into thinking we are on a different page without actually redirecting?
btw I don't see it being useful for this solution but I cannot use jQuery (so many things would have been easier if I could) for some reason it will not work in our ServiceNOW instance.
Hopefully someone can help me here.
I have a page that displays a list of users in a modal popup. This page can be accessed in two ways, one way you choose Unapproved users and it will open the page, the other way you choose user accounts which will open a popup asking if you have any search criteria such as name, once you have finished there you search and it brings up the page of users.
I have a button on the form to clear any filters. When i run it on the Unapproved users page, it clears the box fine, however if i do it on the form from the other way the code will not empty the textbox and when i try an alert it shows no data. Where as the alert works on the Unapproved route!
Here is the jquery that i am using:
clear: function () {
//reset filters//
$('.usersFilterList li').remove();
$('.userFilterSelect option').show();
$('#UserFilter_SearchTermIncluded').attr('value', ''); // This line doesn't seem to work properly
alert($('#UserFilter_SearchTermIncluded').attr('value'));
//hide filter options
MSG.showNHide('', '#usersFilterBox');
//reset modal control buttons
$('#usersButSaveFilter,#usersButClearFilter').hide();
$('#usersButFilter').fadeIn();
usersFilter.refresh(0);
}
Can anyone see if i am doing anything stupid? As i say, it is exactly the same form called from the same MVC action just with the other popup in between.
Apologies if this is confusing, I cannot post anymore code i am afraid. I can assure you that the ID of the textbox is correct though.
Any advice here would be much appreciated as I have been staring at it for hours now...
Cheers,
Gareth
If i right click the second option and run in new tab and run that first pop up as a full page the code will then work! So the problem appears to be that there are two popups.
SOLVED
I found a work around of my own, thanks for all your help.
I simply assigned a class and searched for any items with that class and cleared it like so:
$('.jq-clearme').val('');
I will close this when i can. I am not allowed yet due to my rep being too low.
To change the value of an element (or to retrieve it), accessing the attribute is the wrong way to go - it's not synchronized in both directions. What you want is the property. While also exposed through .prop('value'[, newvalue]) the correct way to get/set it with jQuery is .val([newvalue]).
To clear the element's value use the following:
$('#UserFilter_SearchTermIncluded').val('');
To retrieve/show it, use
alert($('#UserFilter_SearchTermIncluded').val());
You should use val() to get/set the value of the input.
Use without a parameter to get the value:
$('#UserFilter_SearchTermIncluded').val();
And with a paramater set the value, in this case set it to nothing:
$('#UserFilter_SearchTermIncluded').val('');
Is there an ajax call involved which might be loading the Javascript you posted twice and hence when called the second time (after the ajax call) it finds a conflict?
As mentioned by others best to use .val('') to set a value and .val() to get the value. Check in firebug if there are any Javascript errors.
I found a work around of my own, thanks for all your help.
I simply assigned a class and searched for any items with that class and cleared it like so:
$('.jq-clearme').val('');
I will close this when i can. I am not allowed yet due to my rep being too low.
I have a form with a read only field for display/submit to the next page purposes.
However, I noticed using developer tools in Chrome, I was able to add an id to an element, use the javascript console to select that element, and change its value. I submitted the form and what do you know - the next page acted on it as if it was the original value.
Now, there shouldn't be any problem with the people using the site I'm building, but it seems like a huge security flaw to me. Isn't the point of read-only to remain constant? If a savvy user to change it around, doesn't that pose a big problem? In fact, I didn't even think you could add and change attributes in chrome.
Please post your thoughts below, and let me know if there's a solution ("disabled" textfield, but setting the disabled property doesn't send the data to the next page).
NEVER trust input from a web form.
The user could, just as easily, remove the readonly attribute and edit the value. The readonly attribute is only something to help the user when filling out the form, so they don't edit a value expecting it to change, when your server actually won't let it be changed. So, always remember to code the behavior on your server first, and have the HTML form be a helpful guide for users to make the form easier to fill out (without having to submit the form several times to get relevant error messages).
To overcome this, if something is readonly and you do not want it edited, you could store the value in your database. Also, values provided by users should always be checked (and sanitized) as no amount of JavaScript, HTML, or CSS is going to prevent someone who knows what they're doing from adding new or changing/removing existing values.