Detecting Browser Autofill
The problem is autofill is handled differently by different browsers. Some dispatch the change event, some don't. So it is almost impossible to hook onto an event which is triggered when browser autocompletes an input field.
Change event trigger for different browsers:
For username/password fields:
- Firefox 4, IE 7, and IE 8 don't dispatch the change event.
- Safari 5 and Chrome 9 do dispatch the change event.
For other form fields:
- IE 7 and IE 8 don't dispatch the change event.
- Firefox 4 does dispatch the change change event when users select a value from a list of suggestions and tab out of the field.
- Chrome 9 does not dispatch the change event.
- Safari 5 does dispatch the change event.
You best options are to either disable autocomplete for a form using autocomplete="off"
in your form or poll at regular interval to see if its filled.
For your question on whether it is filled on or before document.ready again it varies from browser to browser and even version to version. For username/password fields only when you select a username password field is filled. So altogether you would have a very messy code if you try to attach to any event.
You can have a good read on this HERE
Detecting when the autofill has been filled
There's a bug open over at http://code.google.com/p/chromium/issues/detail?id=46543#c22 relating to this, it looks like it might (should) eventually be possible to just write over the default styling with an !important
selector, which would be the most elegant solution. The code would be something like:
input {
background-color: #FFF !important;
}
For now though the bug is still open and it seems like your hackish solution is the only solution for Chrome, however a) the solution for Chrome doesn't need setTimeout
and b) it seems like Firefox might respect the !important
flag or some sort of CSS selector with high priority as described in Override browser form-filling and input highlighting with HTML/CSS. Does this help?
Detecting browser autofill before selection
Read this article, they go in-depth on detected auto-fill events. The problem is that not all browsers support auto-fill events, however I don't think any would be foolish enough to support this feature before the user makes a selection. Think about this: if they supported auto-fill events before a selection was made it would be extremely simple to steal peoples passwords, zipcodes, credit cards, etc. Since you could just send an AJAX request containing the auto completed information in each of these fields, regardless of whether the user actually selected them.
Sorry, if I couldn't be of more help.
Browser Autofill and Javascript triggered events
One solution I have been using occasionally is to check whether the value of the field/input/select differs from it's defaultValue. defaultValue would be the value that was originally in the markup, and value is the current value aka selected or entered value. This would probably differ even though the form was autopopulated.
If you want to turn off autofill altogether, it might be wise to add autocomplete="off" on fields that are directly connected to your logic.
Related Topics
JavaScript: Difference Between .Foreach() and .Map()
Correct Try...Catch Syntax Using Async/Await
What's the Right Way to Decode a String That Has Special HTML Entities in It
How to Post a File from a Form With Axios
How to Provide Named Parameters in a Function Call in JavaScript
Tainted Canvases May Not Be Exported
How to Use Backslashes (\) in a String
How to Simulate a Click With JavaScript
Jquery Scroll() Detect When User Stops Scrolling
How to Update the Parent'S State in React
Response to Preflight Request Doesn't Pass Access Control Check
CSS Hover VS. JavaScript Mouseover
How to Add Anything in <Head> Through Jquery/Javascript
Difference Between Synchronous and Asynchronous Programming (In Node.Js)
How to Show Live Preview in a Small Popup of Linked Page on Mouse Over on Link