When does Chrome autofill in a web page render?

I have a customer who wanted their UI to display field names in a form (username field says "username", password field says "password", etc.). Since the form uses a password type <input> (which normally displays dots), I had to mock filling data into the fields by overlaying them with divs that contained the verbiage.

To recognize autofill, I wrote some Javascript that checks to see if the field is filled and acts accordingly (either hiding or showing the verbiage).

As far as I can tell, Chrome is the only browser that goes wonky. It doesn't seem to care if there's autofill data or not, and the verbiage always overlays the autofill data (ostensibly because the hide functionality isn't being triggered).

My long-winded question is When does Chrome autofill data in the rendering process? Does it wait until Javascript has finished as well? Is there any way for me to check if autofill data is occupying a fi开发者_高级运维eld in Chrome?

A simple workaround would be to use the placeholder attribute of HTML5, supported by WebKit and Firefox. It would take an extra bit of feature detection, but then you’d only have to implement the mock overlay in non-Chrome.

Dive Into HTML5 explanation

I decided to attach a listener to an event that activated the modal that contained the forms. Needless to say, this is a solution that would only work in my particular circumstances. I don't consider this an answer, but I'm posting it here to possibly give others looking for a solution a workaround.